vscode eslint js代码检查工具

张映 发表于 2018-12-24

分类目录: nodejs/vue/js/jquery

标签:, , ,

eslint是一个javascript代码静态检查工具,可以检查javascript的语法错误,提示潜在的bug,可以有效提高代码质量,维持前端团队高度一致的编码风格。ESLint不但提供一些默认的规则,也提供用户自定义规则来约束所写的javascript代码。

1,vscode安装eslint扩展,以及nodejs安装eslint

  1. # npm install -g eslint  

2,项目中,安装eslint插件

  1. # npm install -save-dev eslint-plugin-node  
  2. # npm install -save-dev eslint-plugin-html  
  3. # npm install -save-dev eslint-plugin-vue  

3,在项目根目录初始化

  1. # eslint --init  

会在根目录下产生一个.eslintrc.js文件,简单配置如下:

  1. module.exports = {  
  2.     "env": {  
  3.         "browser": true,  
  4.         "commonjs": true,  
  5.         "es6": true,  
  6.         "node": true  
  7.     },  
  8.     "extends""eslint:recommended",  
  9.     "parserOptions": {  
  10.         "ecmaVersion": 8,  
  11.         "sourceType""module"  
  12.     },  
  13.     "rules": {  
  14.         "indent": [  
  15.             "error",  
  16.             "tab"  
  17.         ],  
  18.         "linebreak-style": [  
  19.             "error",  
  20.             "unix"  
  21.         ],  
  22.         "quotes": [  
  23.             "error",  
  24.             "single"  
  25.         ],  
  26.         "semi": [  
  27.             "error",  
  28.             "never"  
  29.         ]  
  30.     }  
  31. };  

看一下效果:

eslint代码检查工具

eslint代码检查工具

如果不想使用eslint代码检查,直接删除.eslintrc.js就好了。



转载请注明
作者:海底苍鹰
地址:http://blog.51yip.com/jsjquery/2011.html