概述

配合vscode，按照自定义的eslint规则，保存格式化vue项目，请确保vscode已安装eslint&prettier插件

安装

$ npm install eslint-config-icinfo -D

如果缺失以下包请继续安装

$ npm install  @typescript-eslint/[email protected] @typescript-eslint/[email protected] [email protected] [email protected] [email protected] --save-dev

使用方法

配合vscode以及prettier实现保存自动修复

配置文件

在项目根目录下新建文件.eslintrc.js

module.exports = {
    parserOptions: {
        parser: '@typescript-eslint/parser',
    },
    extends:['icinfo']
}

在项目根目录下新建文件.vscode/settings.json

{
    "editor.detectIndentation": false,
    "eslint.enable": true,
    // 重新设定tabsize
    "editor.tabSize": 4,
    // #每次保存的时候自动格式化
    "editor.formatOnSave": false,
    // #每次保存的时候将代码按eslint格式进行修复
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
        //"source.fixAll.stylelint": true
    },
}

在项目根目录下新建文件.prettierrc.js

/* 官网：https://prettier.io/docs/en/options.html */

module.exports = {
  semi: false, // 尽可能不要分号
  singleQuote: true, // 尽可能使用单引号
  trailingComma: 'all', // 尽可能使用尾随逗号，参考：http://es6.ruanyifeng.com/#docs/style#对象
  endOfLine: 'lf'
}

在项目根目录下新建文件.editorconfig

root = true

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

使用

执行以下命令即可：

$ eslint dir/**.js

如果需要自动格式化代码，在执行时添加--fix选项：

$ eslint dir/**.js --fix

常见问题

1、如果在使用babel-eslint时报错，可能是该模块的 Bug，目前可以通过以下方法解决：

module.exports = {
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module',
    allowImportExportEverywhere: false,
  },
  extends: 'lei',
  rules: {
    // 关闭以下规则
    'generator-star-spacing': 'off',
    'require-yield': 'off',
  },
};

2、在使用过程中，可能会遇到一些例外情况，比如需要更改参数对象的属性，可以通过eslint-disable-next来临时关闭对下一行的检查：

// eslint-disable-next-line no-param-reassign
param.xxx = 'ok';

注意：任何时候请勿使用eslint-disable来关闭eslint的检查，如果该备注不能与eslint-enable成对出现将会导致余下的程序不能正常获得检查

3、检查 HTML 文件内的 script 标签：

需要执行以下命令安装eslint-plugin-html插件：

$ npm install eslint-plugin-html --save-dev

并修改文件.eslintrc.js，载入eslint-plugin-html插件：

{
  plugins: [ 'html' ],
}

在 HTML 文件中，<script>标签需要包含type="text/javascript"，比如：

<script type="text/javascript">
  var a = 10;
</script>

由于eslint命令默认只会检查.js后缀的文件，所以需要在执行命令时指定.html后缀，比如：

$ eslint --ext .js,.html . --fix