Vue中使用eslint和editorconfig

vue-cli笔记(使用eslint、editorconfig)

使用eslint的好处

1、避免运行时因格式问题报错
2、方便团队合作，代码风格统一

安装eslint

命令行执行：

  npm i 
  eslint eslint-config-standard 
  eslint-plugin-standard 
  eslint-plugin-promise 
  eslint-plugin-import 
  eslint-plugin-node 
  eslint-plugin-html -D

eslint-plugin-html插件识别html文件中的script标签里面的JavaScript

文件配置说明

在项目目录新建.eslintrc文件:

{
  "extends": "standard",
  "plugins": [
    "html"
  ],
  "rules": {
    "no-new": "off"
  }
}

启动命令配置

在package.json的scripts中加入：

"lint": "eslint --ext .js --ext .jsx --ext .vue client/",
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue client/"

client/ 为要检查的文件夹
执行：

npm run lint          //语法检查
npm run lint-fix      //自动修复语法检查出现的问题

自动检查语法配置

命令行执行：

npm i eslint-loader babel-eslint -D

然后在.eslintrc文件中添加"parser": "babel-eslint"：

{
 "extends": "standard",
  "plugins": [
    "html"
  ],
  "parser": "babel-eslint",
  "rules": {
    "no-new": "off"
  }
}

在webpack的配置文件的module.rules中加入：

{
   test: /\.(vue|js|jsx)$/,
   loader: 'eslint-loader',
   exclude: /node_modules/,
   enforce: 'pre'   //预处理
},

添加editorconfig

在项目目录新建.editorconfig文件：

root = true
    
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true