规范

CV大成者
81 阅读4分钟

前述

prettier是格式化代码工具，eslint是代码检测工具两者不能混为一谈，但能结合使用.通常为husky,lint-staged,eslint,prettier

package.json

'scripts':{
    'precommit':'lint-staged'
},
'lint-staged':{
    'src/**/*.js':[
        'eslint --fix --ext .js',
        'prettier --write',
        'git add'
    ]
},
'devDependencies':{
    "eslint": "^5.0.0",
    "eslint-config-ali": "^2.0.1",
    "eslint-plugin-import": "^2.6.0",
    "eslint-plugin-react": "^7.1.0",
    "husky": "^0.14.2",
    "babel-eslint": "^8.1.1",
    "lint-staged": "^4.0.0",
    "prettier":"^1.16.4",
    "eslint-plugin-prettier":"^3.0.1",
    "eslint-config-prettier":"^4.0.0"
}



module.exports = {
  "extends": ["eslint-config-ali","prettier", "plugin:prettier/recommended"],
  "parser": "babel-eslint",
  "rules": {
    "prettier/prettier": "error", //表示被prettier标记的地方抛出错误信息
    "strict": "off",
    "no-console": "off",
    "import/no-dynamic-require": "off",
    "global-require": "off",
    "require-yield": "off",
  },
  "plugins": ["prettier"],
  "globals": {
    "React": "readable"
  }
};

//.prettierrc.js
module.exports={
  printWidth: 80,
  semi: true,
  singleQuote: true,
  trailingComma: 'none',
  bracketSpacing: true,
  jsxBracketSameLine: false,
  arrowParens: 'avoid',
  requirePragma: false,
  proseWrap: 'preserve'
}

lint-staged （部分改动检查）

Eslint会一次性检查所有的文件，改动项目应该是渐进式的，且应该只改动每次修改的文件。此时，lint-staged就派上了用场。npm地址

eslint常用插件

  • eslint-plugin-react（支持react规则）
  • eslint-plugin-vue（支持vue规则）
  • eslint-plugin-node（支持nodejs规则）
  • eslint-plugin-import（支持import语句规则）
  • eslint-plugin-promise（支持promise语句规则）
  • eslint-plugin-html（提取html中的js）
  • eslint-plugin-json（支持json规则）
  • eslint-plugin-es6（支持es6规则）
  • eslint-plugin-es5（支持es5规则）
  • eslint-friendly-formatter 终端eslint报错好看

插件一般命名： eslint-plugin-(pluginName插件名)，可简写为pluginName

eslint规则风格文件

eslint-config-name*  //eg:eslint-config-vue vue风格文件

eslint忽略文件

项目根目录root创建.eslintignore文件,.eslintignore是一个纯文本文件。

> 例：
```
/dist/ 
/node_modules/\*
/bower_components/\*
/src/lib

```

eslint行内配置

```
/*eslint-disable*/ 、 /*eslint-enable*/
/*global*/
/*eslint*/
/*eslint-env*/
```

eslint通用三大规则标准

  • eslint-recommended eslint默认规则,官网地址

    eslint默认情况下未启用任何规则。配置文件中的"extends": "eslint:recommended"属性可启用报告常见问题的规则

  • eslint-config-google Google标准，npm地址

    npm install --save-dev eslint eslint-config-google

    国内不常用

  • eslint-config-airbnb 爱彼迎标准，npm地址

    查看正确版本及其包依赖

    npm info "eslint-config-airbnb@latest" peerDependencies

    npm版本>5,直接安装

    npm install-peerdeps --dev eslint-config-airbnb

    npm版本<5

    mac/linxu用户:
命令方式1：
npm install --save-dev eslint-config-airbnb eslint@^#.#.# eslint-plugin-jsx-a11y@^#.#.# eslint-plugin-import@^#.#.# eslint-plugin-react@^#.#.# eslint-plugin-react-hooks@^#.#.#
命令方式2：
(
  export PKG=eslint-config-airbnb;
  npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)

    windows用户：
命令方式1：
npm install -g install-peerdeps
install-peerdeps --dev eslint-config-airbnb
命令方式2：
npm install --save-dev eslint-config-airbnb eslint@^#.#.# eslint-plugin-jsx-a11y@^#.#.# eslint-plugin-import@^#.#.# eslint-plugin- react@^#.#.# eslint-plugin-react-hooks@^#.#.#

    规则繁多,体系庞大，不建议

  • eslint-config-standard 一些前端群群体自定义标准，npm地址

    npm install eslint-config-standard --save-dev

    若要手动设置,安装以下插件

    npm install eslint-config-standard --save-dev
npm install eslint-plugin-standard --save-dev
npm install eslint-plugin-promise --save-dev
npm install eslint-plugin-import --save-dev
npm install eslint-plugin-node --save-dev

eslint配置方式

eslint会自动查找.eslintrc*文件或package.json里的eslint配置，若查找到root:true目录，则不再向上查找。若配置.eslintrc为纯json格式文件,.eslintrc.js为模块化文件，需modules.export暴露。package.json文件为''eslintConfig'属性配置

```
{   
    //停止向上查找配置文件
    'root':true,
    //eslint环境,这些环境并不互斥
    'env':{
        'browser':true,
        'node':true,
        'commonjs':true,
        'es6':true
    },
    //eslint脚本执行期间访问的额外全局变量
    'globals':{
        location:true,
        setTimeout:true,
        vue:true,
        wx:true,
        react:true
    },
    //引用的规则,默认为eslint,recommended规则
    'extends':[
        'eslint:recommended' //eslint推荐规则
        'standard'
    ],
    //插件
    'plugins':[
        'html',  //eslint-plugin-html的简写，可识别html中的js代码
        'vue' //eslint-plugin-vue的简写，识别vue中的js代码
    ],
    //自定义规则
    'rules':{
        'indent':[1,4]
    },
    //解析参数
    parserOptions:{
        'parser':'babel-eslint',//指定解释器为babel-eslint
        'ecmaVersion':'2017',//启用ES8语法支持,默认为5,对应版本:2015(ES6),2016(ES7),2017(ES8),2018(ES9)
        'sourceType':'module', //module表示ECMAScript模块,默认script
        'ecmaFeatures':{ //启用额外语言支持
            'globalReturn':true,//允许全局作用域下使用return语句
            'jsx':true,//启用jsx
            'modules':true,
            'impliedStrict':true,//启用全局strict-mode(ES5+)
            'experimentalObjectRestSpread':false//启用实验性API
        }
    }
}
```
  • eslint默认解释器为espree解释器,在现在webpack应用框架下，通常通过babel进行处理，babel语法对eslint可能支持不是很完善，此时指定用babel-eslint进行处理。
  • rules里的自定义规则会覆盖extends里的规则

此时执行package.json里script命令：

```
//package.json
scripts:{
    "lint": "eslint --ext .js --ext .jsx --ext .vue src/"
}
npm run lint
```

此时屏幕全屏飘红，但此是eslint为一次性全部检测，我们希望能实时检测，则涉及预处理

webpack配置及预处理

我们平时希望在每次修改代码情况下，就能及时预知错误，并快速定位修复，此时就用到 eslint-loader

```
rules:[
    ...//其他规则
    {
        test:/\.(vue|js|jsx)$/,
        loader:'eslint-loader',
        exclude:/node_modules/, //不检查目录
        include:[path.resolve(__dirname,'src')],//指定检查的目录
        enfore:'pre',  //预编译
        options:{ 
            fix:true //编译时自动修复
        }
    }
]
```

vue-loader为处理vue文件，eslint-loader为代码检验。应先代码检验再处理文件，所以eslint-loader前置于vue-loader。enfore为webpack.rules属性，此为预处理

Eslint具体忽略检查,eslint支持在文件开头以注释的方式，eslint将跳过该文件检查

Eslint 初始化

eslint --init

avatar
文章
阅读
粉丝