ESLint+Prettier统一TypeScript代码风格

加分号仍是不加分号？tab仍是空格？你还在为代码风格与同事争论得面红耳赤吗？

关于代码风格，咱们很难区分谁对谁错，不一样的人有不一样偏好，惟有强制要求才能规避争论。

本文将介绍，如何使用ESLint + Prettier来统一咱们的前端代码风格（这里以React项目为例）。

Prettier

Prettier是一个流行的代码格式化工具的名称，它可以解析代码，使用你本身设定的规则来从新打印出格式规范的代码。

Prettier具备如下几个有优势： 可配置化 支持多种语言 集成多数的编辑器 简洁的配置项

它支持的语言有：

• JavaScript, including ES2017
• JSX
• Angular
• Vue
• Flow
• TypeScript
• CSS, Less, and SCSS
• HTML
• JSON
• GraphQL
• Markdown, including GFM and MDX
• YAML

使用Prettier能够将代码格式化成统一的风格。 下面使用官方的例子来简单的了解下它的工做方式。 Input

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());
复制代码

Output

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne()
);
复制代码

安装

npm install prettier
复制代码

建立配置文件

在项目根目录下建立.prettierrc.js文件进行配置：

module.exports = {
    printWidth: 120,
    tabWidth: 4,
    singleQuote: true,
    semi: true,
    trailingComma: 'es5',
    bracketSpacing: true,
    jsxBracketSameLine: true,
    arrowParens: 'always',
    parser: 'typescript'
};
复制代码

ESLint

提起TypeScript代码检查工具，咱们首先可能会想到TSLint。可是因为性能问题，TypeScript 官方决定全面采用 ESLint，甚至把仓库（Repository）做为测试平台，而 ESLint 的 TypeScript 解析器也成为独立项目，专一解决双方兼容性问题。而 TSLint 将放弃维护。 所以，咱们决定采用 ESLint。

安装

首先咱们安装eslint及使用ESLint来为你运行Prettier所需的一些包

npm install eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-jsx-control-statements babel-eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser
复制代码

建立配置文件

在项目根目录下建立.eslintrc.js文件进行配置：

module.exports = {
    parser: '@typescript-eslint/parser', // Specifies the ESLint parser
    extends: [
        'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
        'plugin:react/recommended',
        'plugin:jsx-control-statements/recommended',
        'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
        'plugin:prettier/recommended', // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
        'prettier/react'
    ],
    "settings": {
        "react": {
            "version": "detect",
        }
    },
    plugins: ['@typescript-eslint', 'react', 'jsx-control-statements', 'prettier'],
    env: {
        browser: true,
        node: true,
        es6: true,
        mocha: true,
        'jsx-control-statements/jsx-control-statements': true
    },
    globals: {
        $: true
    },
    rules: {
        'prettier/prettier': 1,
        'no-console': ['warn', { allow: ['warn', 'error'] }],
        "eqeqeq": ['warn', 'always'],
        "prefer-const": ['error', {"destructuring": "all", "ignoreReadBeforeAssign": true}],
        '@typescript-eslint/indent': ['error', 4, { VariableDeclarator: 4, SwitchCase: 1 }],
        '@typescript-eslint/no-unused-vars': 0,
        "@typescript-eslint/interface-name-prefix": 0,
        "@typescript-eslint/explicit-member-accessibility": 0,
        "@typescript-eslint/no-triple-slash-reference": 0,
        "@typescript-eslint/ban-ts-ignore": 0,
        "@typescript-eslint/no-this-alias": 0,
        "@typescript-eslint/triple-slash-reference": ['error', { "path": "always", "types": "never", "lib": "never" }],
        // React相关校验规则
        "react/jsx-indent": [2, 4],
        "react/jsx-no-undef": [2, { allowGlobals: true }],
        "jsx-control-statements/jsx-use-if-tag": 0
    }
};
复制代码

强制校验和格式化

讲到这里两个工具配合使用已经讲好了，可是这些步骤都依赖于人工自觉，要作到一点点强制功能，咱们能够在 git commit 前强制代码格式化和代码校验。

安装

npm install --save-dev husky lint-staged
复制代码

修改 package.json

{
  "name": "project-name",
  // ...
  "scripts": {
    "eslint": "eslint --ext .tsx,.ts --fix ./src", // 须要在这里指定校验.tsx,.ts后缀的文件
  },
  "husky": {
    "hooks": {
      // git commit 前强制代码格式化和代码校验
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,tsx}": [
      "npm run eslint",
      "prettier .prettierrc.js --write",
      "git add"
    ]
  }
}
复制代码