Vue + TypeScript 项目放弃 TSLint，拥抱 ESLint
背景
我们的一些项目中用到了 TSLint 来规范我们的 TypeScript 代码，甚至没有 Lint 工具来辅助开发，我们这里希望用 ESLint 来取代 TSLint，主要原因是 TSLint 已经被官方放弃，所以我们采用 ESLint，并结合 prettier 来规范我们的代码和统一团队风格。
一、安装 ESLint，删除 TSLint
由于我们的项目可能不大一样，有的项目是没有任何 lint 工具，有的是 vue-cli 自带安装的 ESLint 或者 TSLint，这里大家参考 package.json 文件，自行选择。我现在以我手头上的 shopintar 项目为例，仅有 TSLint。
-
1、首先删除 tslint.json 配置文件
-
2、安装相关依赖
npm i -d eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin@typescript-eslint/parser: ESLint 专门解析 TypeScript 的解析器
@typescript-eslint/eslint-plugin: 内置各种解析 TypeScript rules 插件 -
3、新建 .eslintrc.js 文件
module.exports = {
root: true,
env: {
browser: true,
node: true,
es6: true,
},
parser: 'vue-eslint-parser',
extends: [
'plugin:vue/recommended',
'plugin:prettier/recommended',
'prettier/@typescript-eslint',
'plugin:@typescript-eslint/recommended',
],
plugins: ['vue', '@typescript-eslint'],
parserOptions: {
parser: '@typescript-eslint/parser',
sourceType: 'module',
ecmaVersion: 2018,
},
rules: {
'prettier/prettier': 'error',
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'space-before-function-paren': [2, 'never'], // function 的圆括号之前是否使用空格
'array-bracket-spacing': 2,
'no-var': 2,
'no-eval': 2,
'arrow-spacing': 2,
'block-spacing': 2,
'key-spacing': 2,
'brace-style': 2,
camelcase: 2,
'comma-dangle': [2, 'always-multiline'],
eqeqeq: [2, 'always', { null: 'ignore' }],
'object-curly-spacing': [2, 'always'],
'nonblock-statement-body-position': 2, // if 语句后必须跟大括号
'vue/max-attributes-per-line': [
0,
{
singleline: 1,
multiline: {
max: 1,
allowFirstLine: false,
},
},
],
// 设置typescript-eslint规则
// https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin/docs/rules
'@typescript-eslint/member-delimiter-style': [
2,
{
multiline: {
delimiter: 'none', // 'none' or 'semi' or 'comma'
requireLast: true,
},
singleline: {
delimiter: 'semi', // 'semi' or 'comma'
requireLast: false,
},
},
],
'@typescript-eslint/interface-name-prefix': [2, { prefixWithI: 'always' }],
'@typescript-eslint/explicit-function-return-type': ['off'],
'@typescript-eslint/no-explicit-any': ['off'], // 先忽略，但是尽量少用 any
},
}
注意: parser: 'vue-eslint-parser'，这里要区分和 parserOptions.parser 的区别，vue-eslint-parser 是解析 .vue 文件，而 parserOptions.parser：@typescript-eslint/parser 是我们自定义来解析 TypeScript 的，否则就无法正确的检验 TypeScript。相关解释
二、安装 prettier
prettier 用来做格式化工具配合我们的 ESLint 可以更大的发挥作用，首先安装相关依赖：
npm i -d prettier eslint-config-prettier eslint-plugin-prettier
eslint-config-prettier: 这个插件的作用是当 ESLint 和 prettier 配置冲突时优先 prettier
eslint-plugin-prettier: 将 prettier 作为 ESLint 规范来使用
接着按需配置 prettier，新建 .prettierrc 文件，参考
{
"singleQuote": true,
"tabWidth": 2,
"useTabs": false,
"semi": false,
"trailingComma": "all",
"printWidth": 120
}
然后在 .eslintrc.js 文件中引入 prettier 配置，在 extends 数组中添加 prettier/@typescript-eslint 和 plugin:prettier/recommended，到这里 ESLint 和 prettier 相关配置已经完成，接下来我们利用一些工具帮我们在 git commit 阶段完成代码格式化和校验工作。
三、使用 husky & lint-staged 自动完成校验与格式化
总结
通过以上几步我们可以在 commit 之前自动帮我们完成格式化和校验的工作，但是值得注意的是，这里的格式化和校验并不是全局的，而是我们当前提交的内容，如果我们想要格式化全局代码或者校验全局代码，这里我们可以在 package.json 中的 script 命令中写个脚本需要的时候手动执行一下，而不是把它放在 pre-commit 钩子上每次 commit 都执行，耗费时间。
"format": "prettier --write \"src/**/*.ts\" \"src/**/*.vue\"",
