现有vue项目,引入eslint

背景:
项目已经进行了很久,没有统一的代码规范,就想引入eslint,规范一下,也可能是强迫症犯了闲的。

正文:
 

// 1.安装eslint
$ cnpm install -g eslint
// 2.用别人的轮子,eslint三个标准之一的eslint-config-standard
$ cnpm install eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node eslint-plugin-html eslint-loader babel-eslint -D



然后,我们要去项目的根目录里面手动创建一个.eslintrc文件,然后在里面敲入以下代码:
{
  "extends": ["standard", "plugin:vue/essential"],
  "plugins": [
    "html"
  ],
  "parserOptions": {
    "parser": "babel-eslint"
  },
  "rules": {
    "no-tabs": 0
  }
}
执行完以上步骤后,我们跳转到package.json文件里面的scripts里面新增一条命令:
"lint": "eslint --ext .js --ext .jsx --ext .vue src/"
执行完以上步骤之后,在build目录下找到webpack.config.base.js,然后在module下面的rules里面添加一个对象:
rules: [
  {
    test: /\.(vue|js|jsx)$/,
    loader: 'eslint-loader',
    exclude: /node_modules/,
    enforce: 'pre'
  },
  ......
]

现在我们就可以到terminal里面输入$ cnpm run lint,来检验项目里的代码是否符合ESLint的规则,这个时候就会有很多的错误和警告,别担心,如果现在不想改,也可以让eslint忽略他们,再未来的代码拥有eslint,或者留着以后慢慢优化。在根目录新建一个文件.eslintignore里面写上需要忽略的文件夹或者文件,如下(这个不能照抄,按照自己的项目目录来添加):

build/
config/
static/
src/api/
src/assets/
src/common/
src/components
src/styles/
src/vuex/
src/views/achievement
src/views/activity
src/views/commission
src/views/components
src/views/contract
src/views/customerManagement
src/views/message
src/views/orderSystem
src/views/Home.vue
src/routes.js
src/main.js

这个时候你可能只检测了几个文件,还是报错,想改校验规则,或者让他的报错优先级降低,你可以在.eslintrc的router里面改(上面的文件里面已经给你添加了一条)。
eslint的router规则参考:https://www.cnblogs.com/-walker/p/8143715.html
本篇文章参考:https://www.imooc.com/article/32222(算是把文章精简了和拓展了)
到这其实照做,可能还有其他的坑,那就自己找找方法吧。
在编辑器中自动提示eslint的错误,我用的是webstorm,配置方法参考:https://blog.csdn.net/qq_29329037/article/details/80100450
只是把文中的“2.安装好之后,找到settings中ESLint,选中,就会进入配置页面,勾选Enable->第一项配置自己安装nodejs目录下node.exe,第二项配置当前项目中node_modules/.bin目录下的eslint.cmd,第三项改成.eslintrc”红色字体部分更换了。
 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章