ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。 代码检查是一种静态的分析,常用于寻找有问题的模式或者代码,并且不依赖于具体的编码风格。 ESLint 可以让程序员在编码的过程中发现问题而不是在执行的过程中。 ESLint 使用 Node.js 编写,这样既可以有一个快速的运行环境的同时也便于安装。
在npmjs.com内查询 eslint 可以发现
目前最新版Eslint@5.4.0,安装条件
Prerequisites: Node.js (>=6.14), npm version 3+.
如果想检测vue组件的语法,需要 eslint-plugin-vue
>=3.18.0
. >=4.7.0
to use eslint --fix
.>=4.14.0
to use with babel-eslint
.>=4.0.0
首先安装符合要求的node和npm版本,安装yarn(建议通过msi文件全局安装)
在根目录下新建 .eslintrc.js 文件, 亦可以 eslint --init 生成:
module.exports = {
"root": true,
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": [
"eslint:recommended"
],
"parserOptions": {
"sourceType": "module"
},
"rules": {"indent": [
"error",
4
],
"linebreak-style": [
"off"
],
"semi": [
2, "always"
],
"no-console": [
"off"
]
}
};
我们使用 eslint:recommended plugin:vue/recommended plugin:import 规则进行校验,并优先使用 standard style 规则。
eslint-plugin-vue
eslint-plugin-import
"rules": {
"semi": [2, "always"],
"quotes": [2, "double"]
}
规则有3种配置:
eslint需要全局安装 yarn global add eslint
eslint --fix 主动自动修复
eslint --ignore-pattern 'lib/*' --fix **/*.js **/*.vue
此命令可以修复大部分语法,剩下的需要手动修复。
注意:eslint需要全局安装,对应的eslint-plugin-vue, eslint-plugin-import等插件也需要全局安装才能使用fix。
对于webpack编译时的自动修复,可以如下配置:
{
loader: 'eslint-loader',
options: {
fix: true
}
}
用sublime做vue组件的校验时,虽然各种插件都安装了,但依然是没有效果的,最多是用js语法校验.vue组件,这是不行的。不知道是不是我的配置有问题,导致不能用vue组件的语法进行校验,所以这里放弃了使用sublime。
本文推荐大家使用vscode作为自己的新IDE。功能丰富、强大,配置简单,会自动根据你打开的文件推荐安装有用的插件。还可以同步sublime等编辑器的操作习惯比如快捷键等。有着方便的语法库提示。
打开左下角设置,加入以下配置,将包安装方式改为yarn(默认是npm),增加保存即进行自动修复,修复文件报错vue文件。如果不加language:vue,则只对js文件修复,同样如果相对html进行修复,则再增加language: html
"eslint.packageManager": "yarn",
"eslint.validate": [
"javascript",
{
"language": "vue",
"autoFix": true
}
],
"eslint.autoFixOnSave": true,
在左侧栏扩展中安装 ESLint和 Vetur插件
重启IDE既可以看到校验效果
左侧会显示语法错误数和是否修改了此文件, 右侧会波浪线显示语法错误的地方。
有时会遇到保存一次修复不完全的情况,多保存几次即可修复大部分语法。对于敲一会代码保存一下的可以不用担心这个问题。