初识ESLint基于VScode

其实很早之前就与ESLint擦肩而过啊,当时ESLint是构建项目的时候一不小心给带上的,然后在敲代码的时候刚写没几行,ctrl+s一大堆错误,差点没吓死我啊,查了原因,发现配置文件里面有ESLint,果断把他扔掉,太”恶心”了,我自己的习惯还需要你来给我规范,想想当时的自己太年轻,太天真.

废话不多说啊,直接说说自己半天下来对ESLint的理解吧,第一眼看到他我想起的是提示hint,实际上它是一个QA工具(质量保证),主要帮助程序猿检测代码,避免一些低级的语法错误,形成一种语法规范,在项目合作上使用ESLint可以统一代码,大致风格一致,那怎么用呢.

ESLint使基于Nodejs的,所以要使用它先要安装Nodejs,通过以下命令来全局安装ESLint(当然你也可以在相应的项目里局部安装啊):

npm install -g eslint

全局安装好了之后,你可以在你想要的位置通过以下命令生成一个相应的.eslintrc.js文件:

eslint –init



这样之后就生成了一个eslint的js文件,这个js文件就是我们到时候要检测代码时依赖的文件(里面的一些参数设置之后可以再改,可以暂时先这样啊),文件生成好了之后怎么用呢,通过相应的eslint工具,把你生成的js文件路径添加在相应的工具规定的位置,如果使用的VScode,那么在”文件->首选项->设置”中在左边点击eslint的options在跳出的选项中选择复制,成功之后会在用户配置(右侧),出现

“eslint.options”: {

}

在这里加入这一句: “configFile”: “G:/configFile/.eslintrc.js”,后面的引号是你的js文件的路径,这样之后重启VScode就可以使用eslint了,在你保存的时候你就会发现你的代码里面有大量的错误了,是不是看着很恼火,对没错,就是这样,因为你默认打开了eslint的所有推荐规则,这些规则会提示你的代码存在大量错误啊,那怎么配置你的eslint呢?

打开你之前生成的.eslintrc.js文件,你可以发现

“env”: {

“browser”: true,

“commonjs”: true,

“es6”: true

},

“extends”: “eslint:recommended”,

“parserOptions”: {

“sourceType”: “module”

},

“rules”: {

“indent”: [

“error”,

4

],

“linebreak-style”: [

“off”,

“windows” //关掉换行报错

],

“quotes”: [

“error”,

“double” //字符串首先要用”“包含起来

],

“semi”: [

“error”,

“always” //”;”一直要记得加

]

}

};

(我写中文的地方都是修改了的,不修改的话这个文件也会报错啊),

一行一行来看:”env”简写了环境这个单词啊,就是你eslint使用的环境啊,一般有以下各种环境:



然后是extends,这里可以让一些基础的配置规则生效,”eslint:recommended”的意思是让所有推荐的规则生效,就是eslint官方文档中的绿色打钩部分的规则全部生效,也可以设置所有规则生效,但是这并不是很好,因为一旦eslint更新了,规则发生了变化你再去检测你的之前写好的代码,你会发现出现了一些莫名的提示错误,所以说最好是自己根据官方规则去配置一些自己想要的规则来规范自己的代码,再之后就是rules,这里写的就是代码规范的规则了,这些规则在官方网站上有很详细的解释,我这里就不赘述了,举个例子吧:

module.exports = {

“env”: {

“browser”: true,

“commonjs”: true,

“es6”: true

},

“extends”: “eslint:recommended”,

“parserOptions”: {

“sourceType”: “module”

},

“rules”: {

“indent”: [

“error”,

4

],

“linebreak-style”: [

“off”,

“windows” //关掉换行报错

],

“quotes”: [

“error”,

“double” //字符串首先要用”“包含起来

],

“semi”: [

“error”,

“always” //”;”一直要记得加

],

“no-console”: 0, //允许使用console

“eqeqeq”: 2, //使用===和!==

“no-else-return”: 2, //if语句中不准在return之后使用else

“no-empty-function”: 2 //禁止出现空函数

}

};

就像这样,配置好自己的规则,然后保存了,就可以检测你的代码了.

以上所说在eslint的官方文档上都有,这里更重要的就是精简一下,让人一看就能上手使用啊,附上ESLint官方中文文档