Vue项目vscode 安装eslint插件的方法(代码自动修复)

ESlint:是用来统一JavaScript代码风格的工具,不包含css、html等。

方法和步骤:

通常情况下vue项目都会添加eslint组件,我们可以查看webpack的配置文件package.json查看,也可以查看工程下是否有.eslintrc.js和.eslintignore查看到eslint是否开启。

当我们编写不符合eslint规范的代码时,启动项目会报错,比如

这个时候可以安装vscode eslint插件,就可以自动检测不符合规范的代码。打开vscode左侧扩展面板,搜索eslint,点击安装,重启后生效

安装好之后,还需要在vscode文件中进行设置:

通过  file->preferences->Settings 出现如下界面:

点击红框,则会出现配置文件

把以下代码复制到这个文件中:

{
 // vscode默认启用了根据文件类型自动设置tabsize的选项
 "editor.detectIndentation": false,
 // 重新设定tabsize
 "editor.tabSize": 2,
 // #每次保存的时候自动格式化
 "editor.formatOnSave": true,
 // #每次保存的时候将代码按eslint格式进行修复
 "eslint.autoFixOnSave": true,
 // 添加 vue 支持
 "eslint.validate": [
 "javascript",
 "javascriptreact",
 {
  "language": "vue",
  "autoFix": true
 }
 ],
 // #让prettier使用eslint的代码格式进行校验
 "prettier.eslintIntegration": true,
 // #去掉代码结尾的分号
 "prettier.semi": false,
 // #使用带引号替代双引号
 "prettier.singleQuote": true,
 // #让函数(名)和后面的括号之间加个空格
 "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
 // #让vue中的js按编辑器自带的ts格式进行格式化
 "vetur.format.defaultFormatter.js": "vscode-typescript",
 "vetur.format.defaultFormatterOptions": {
 "js-beautify-html": {
  "wrap_attributes": "force-aligned"
  // #vue组件中html代码格式化样式
 }
 },
 "window.zoomLevel": 0,
 "explorer.confirmDelete": false,
 "explorer.confirmDragAndDrop": false,
 "editor.renderControlCharacters": true,
 "editor.renderWhitespace": "all"
}

然后在项目的.eslintrc.js中添加如下代码:

// https://eslint.org/docs/user-guide/configuring

module.exports = {
 root: true,
 parserOptions: {
 parser: 'babel-eslint'
 },
 env: {
 browser: true
 },
 extends: [
 // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
 // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
 'plugin:vue/essential',
 // https://github.com/standard/standard/blob/master/docs/RULES-en.md
 'standard'
 ],
 // required to lint *.vue files
 plugins: ['vue'],
 // add your custom rules here
 rules: {
 // allow async-await
 'no-console': 'off',
 indent: ['error', 2, { SwitchCase: 1 }],
 semi: ['error', 'always'],
 'space-before-function-paren': [
  'error',
  { anonymous: 'always', named: 'never' }
 ],
 'generator-star-spacing': 'off',
 // allow debugger during development
 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
 }
}

ctrl + s保存代码后,便会自动修复格式不正确的代码

总结

到此这篇关于Vue项目vscode 安装eslint插件的方法(代码自动修复)的文章就介绍到这了,更多相关vscode 安装eslint插件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2020-04-13

Vue-cli Eslint在vscode里代码自动格式化的方法

编辑器另外一个很重要的功能就是代码格式化了,VS Code默认提供常见文件的格式化,如.js,.html等. 添加对.vue文件的格式化支持 这里我们添加对 .vue 文件的格式化支持. 1. 安装 Vetur 插件 2. 在 VS Code 的设置中添加如下规则: { "vetur.format.defaultFormatter": { "html": "prettier", "css": "prettier&qu

vscode下vue项目中eslint的使用方法

前言 在vscode的vue项目中,关于代码检查和格式化,遇到各种各样的问题,比如: 不清楚安装的拓展的功能,导致安装了重复功能的拓展 右键格式化文档的时候,不是按eslint的规则来格式化,导致需要我再次手动调整 保存时不能自动修复代码 以下通过自己的实践,进行了相应配置,目前可以实现: 仅安装2个推荐的拓展 右键格式化文档按照eslint规则,不会产生错误 保存时自动修复代码 vscode 拓展安装 eslint 拓展 该拓展本身不带任何插件,当前项目要使用该拓展,需要安装相应的npm包(全

vscode中eslint插件的配置(prettier配置无效)

用vue-cli构建vue项目,会有个eslint代码检测的安装 可vscode自带代码格式化是prettier格式(右键有格式化文件或alt+shift+f) 这时候要在vscode上装一个eslint插件 装完后在文件----->首选项------->设置里找到settings.json(快捷键忘了) eslint配置如下,(配置的·具体详情还有待研究,我也是网上copy的,不过亲测可用).保存配置后每次写.vue文件只要control+s保存,就可以把代码格式改成符合eslint标准 &

详解Vscode中使用Eslint终极配置大全

在 vue项目中使用vscode编辑时,使用了如下这套配置,保存时就会根据既定vue项目中.eslintrc.js文件设置的既定规则自动校验并依据规则修复代码. 需安装插件 主要是这两个插件: ESLint Prettier - Code formatter 个人现用vscode插件截图.png vscode中setting.json中配置 { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, /

VScode格式化ESlint方法(最全最好用方法)

ESlint:是用来统一JavaScript代码风格的工具,不包含css.html等. 背景: 近来研究前端,然后一直在百度上找VScode格式化(ESlint)的插件,结果找了半天都不靠谱.目前没有一个可以格式化html.css.符合ESlint的js.vue的插件,所以自己东拼西凑加实践找到解决方法. 解决方案: 1.安装插件 1)ESlint:javascript代码检测工具,可以配置每次保存时格式化js,但每次保存只格式化一点点,你得连续按住Ctrl+S好几次,才格式化好,自行体会~~

vscode使用Eslint+Prettier格式化代码的详细操作

目录 step 1 step 2 step 3 step 4 step 5 最后 效果 step 1 1.安装Eslint插件和Prettier插件 2. 安装eslint npm install eslint -g step 2 1.初始化项目 npm init -y 2.生成eslint配置文件 npx eslint --init 以下是我的配置 完了之后生成一个.eslintrc.json的文件 step 3 1.vscode需要配置保存自动化格式 ⚙ -> 设置 -> Format O

vscode 配置eslint和prettier正确方法

ESlint ESLint 是一款语法检测工具.因为 JavaScript 本身是一门灵活的动态语言,一千个 JavaScriptor 就有一千种写法.为了方便人们的理解,快速上手别人的代码. 说明 在开发项目的时候,往往会通过eslint来检查代码格式,而prettier用来进行代码的格式化.本篇博文主要是记录使用vscode开发vue项目时的eslint和prettier的配置. vscode 安装插件 首先,需要在vscode上安装eslint和prettier的插件. 项目中的配置文件

Vscode关闭Eslint语法检查的多种方式(保证有效)

目录 前言 一.删除Eslint相关依赖项 二.关闭语法检查 1.临时关闭某行检查 2.临时关闭以下所有检查 3.修改配置项 三.设置中关闭语法检查 补充:常见规则列表 总结 前言 ESLint 是一个插件化的 javascript 代码检测工具,它可以用于检查常见的 JavaScript 代码错误,也可以进行代码风格检查,能够很好的执行编码规范,提高项目代码的质量. 但是开发或是学习当中,有时候模板是从github或是gitee上下载下来的半成品项目,项目内部做了好些相关的项目配置,比如Esl

vscode中使用Autoprefixer3.0无效的解决方法

问题 一开始安装的Autoprefixer是最新版本的3.0.1,一波操作后发现无效 想是不是因为没设置browsers?那就设置一下吧 "autoprefixer.browsers": [ "> 1%", "last 2 versions", "not ie <= 8", "ios >= 8", "android >= 4.0" ], 是在setting.jso

2020最新版vscode格式化代码的详细教程

这篇关于vscode格式化配置研究初稿,具体内容如下所示: 前言 之前用vscode进行格式化的时候都是在百度和谷歌上搜"vscode格式化代码"然后直接copy别人.细节的配置一直没去看过. 但是最近一段时间开发项目的时候发现和同组的提交代码的时候格式总是不统一.于是这两天专门看了看插件的官方文档,研究研究. 今天初步有一点研究结果了.会配置一点点了.写此博客与大家共同参考.不足的地方欢迎大家补充,错误的地方欢迎大家纠错. 文章内容包括两个部分:一是理论,二是我的settings.j

eclipse自动提示和自动补全功能实现方法

解决代码的自动提示问题: 1.打开 Eclipse -> Window -> Perferences 2.找到Java 下的 Editor 下的 Content Assist , 右边出现的选项中,有一个Auto activation triggers for Java: 会看到只有一个"."存在.表示:只有输入"."之后才会有代码提示 3.先把上图中"."的地方输入几个随便的字符,例如"dsfd",点最下面的&q

Python格式化压缩后的JS文件的方法

本文实例讲述了Python格式化压缩后的JS文件的方法.分享给大家供大家参考.具体分析如下: 该脚本可以把压缩后的js文件格式上进行些还原,当然不会百分百完美,暂不处理语法问题,只是为了方便阅读js代码 lines = open("unformated.js").readlines()[0].split(";") #一般压缩后的文件所有代码都在一行里 #视情况设定索引,我的情况时第0行是源代码. indent = 0 formatted = [] for line

python实现指定字符串补全空格的方法

本文实例讲述了python实现指定字符串补全空格的方法.分享给大家供大家参考.具体分析如下: 如果希望字符串的长度固定,给定的字符串又不够长度,我们可以通过rjust,ljust和center三个方法来给字符串补全空格 rjust,向右对其,在左边补空格 s = "123".rjust(5) assert s == " 123" ljust,向左对其,在右边补空格 s = "123".ljust(5) assert s == "123