Prettier & ESlint

prettier：https://prettier.io/docs/en/comparison.html
eslint: https://github.com/eslint/eslint

Linter主要分两类

Formatting rules: eg: max-len, no-mixed-spaces-and-tabs, keyword-spacing, comma-style…
Code-quality rules: eg no-unused-vars, no-extra-bind, no-implicit-globals, prefer-promise-reject-errors…
Prettier就是完成Formatting Rules，ESlint负责Cod-quality rules

Prettier配置

安装Prettier

yarn add Prettier

配置.prettier.js文件

    // 放在项目根目录的 .prettierrc.js 文件
    module.exports = {
      printWidth: 100, // 单行最大长度
      tabWidth: 2, // 设置编辑器每一个水平缩进的空格数
      semi: false, // 在句尾添加分号
      singleQuote: true, // 使用单引号
      trailingCommas: 'es5', // 在任何可能的多行中输入尾逗号。
      bracketSpacing: true, // 在对象字面量声明所使用的的花括号后（{）和前（}）输出空格
      jsxBracketSameLinte: false, // 在多行JSX元素最后一行的末尾添加 > 而使 > 单独一行（不适用于自闭和元素） 
      alwaysParens: 'always' // 为单行箭头函数的参数添加圆括号。
    }

ESlint配置

安装ESlint

yarn add eslint —save-dev

配置eslintrc.js

文件类型可以是json/yml/yaml

module.exports = {
    parser:  'esprima', //定义ESLint的解析器,默认为esprima
    extends: ['"eslint:recommended"'],//定义文件继承的子规范
    plugins: ['@typescript-eslint'],//定义了该 eslint 文件所依赖的插件
    env:{ //开启某个环境之后，该环境下的全部变量都可以被读取（global优先于env）
        browser: true,
        node: true,
    },
    globals: {
      Vue: 'readonly',
      d3: 'readonly',
    },
    parserOptions: {//只检查语法，不会检查某个环境下成员是否可用
        parser: '@typescript-eslint/parser', // 解析 .ts 文件
        ecmaVersion: 2019,
        sourceType: 'module',
        ecmaFeatures: {
            modules: true,
        },
    },
    rules: {
        "no-console": "off",
        ......
    }
}

ESlint插件作用和使用

基本使用
安装eslint-plugin-react

module.exports = {
    extends: ['"standard"'],//定义文件继承的子规范
    plugins: ['react'],//这里的插件会去掉eslint-plugin前缀，其实就是依赖的eslint-plugin-react
      rules:{
        "react/jsx-uses-react": "error"//开启react的uses-react规则
    }
}

不过对于大部分插件来说，都会提供基本的配置，减少用户操作

module.exports = {
    extends: [//定义文件继承的子规范
      'standard'，
      'plugin:react/recommended'
    ]
}

ESlint和Prettier冲突了怎么办

首先安装依赖

yarn add prettier eslint-config-prettier eslint-plugin-prettier -D
对每个依赖进行说明：

• prettier：Prettier插件的核心代码。

• eslint-config-prettier：解决ESLint中的样式规范和Prettier中样式规范的冲突，以 Prettier 的样式规范为准，使 ESLint 中的样式规范自动失效。

• eslint-plugin-prettier：将 prettier 作为 ESLint 规范来使用。

修改.eslintrc.js文件，引入Prettier

extends:[
    "eslint:recommended",
    "plugin:prettier/recommended",
],
rules: {
    'prettier/prettier': 'error'//启动prettier
}

修改vscode settings.json

参考： https://github.com/prettier/prettier-vscode

"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave":true

Git Hooks & Husky & lint-stage

Git Hooks

git操作的一些钩子函数，每个git项目下都有.git文件，这个文件里面有个hooks目录，里面会有一些自定义钩子。
我们只关注pre-commit这个钩子，复制一份pre-commit.sample，去掉.sample后缀就可以开始写自己的shell脚本了。但是前端同学很少会写shell脚本的。这个时候husky插件帮助我们解决了这个问题。

Husky

首先安装husky
yarn add husky -D

husky:{
    "hooks": {
      "pre-commit":"npm run test"
  }
}

但是我们想在代码检查之后做一些其他的操作,husky就不够用了，因为我们配合husky

Lint-staged

首先安装lint-stage
yarn add lint-stage -D

{
    "husky": {
      "hooks": {
        "pre-commit": "lint-staged & npm run test",
      }
  }
    "lint-staged": {
    "*.{js, vue, css}": [
      "eslint",
      "git add"
    ]
  }
}