Tslint配置主要配置文件如下：
// tsconfig.json { "compilerOptions": { "target": "esnext", "module": "esnext", "strict": true, "jsx": "preserve", "importHelpers": true, "moduleResolution": "node", "experimentalDecorators": true, "esModuleInterop": true, "resolveJsonModule": true, "allowSyntheticDefaultImports": true, "sourceMap": true, "baseUrl": ".", "types": [ "webpack-env", "jest" ], "paths": { "@/*": [ "src/*" ] }, "lib": [ "esnext", "dom", "dom.iterable", "scripthost" ] }, "include": [ "src/**/*.ts", "src/**/*.js", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx" ], "exclude": [ "node_modules", "src/assets/json/*.json" ] }
// tslint.json { "defaultSeverity": "warning", "extends": [ "tslint:recommended" ], "linterOptions": { "exclude": [ "node_modules/**", "src/assets/json/*.json" ] }, "rules": { "quotemark": [true, "single"], "indent": [true, "spaces", 2], "interface-name": false, "ordered-imports": false, "object-literal-sort-keys": false, "no-consecutive-blank-lines": false, "semicolon": [true, "never"], "member-access": false, "no-console": false, "max-line-length": [ false ] } }
Eslint配置文件如下：
// .eslintrc.js // https://repo.advai.net/advgit/atome-fe/docs/-/blob/1667c9156ed5fa16584e510c550b5ec0f95ad627/standard/.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: ['@typescript-eslint'], parserOptions: { parser: '@typescript-eslint/parser', }, rules: { 'prettier/prettier': 'error', 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'array-bracket-spacing': 2, 'no-var': 2, 'no-eval': 2, 'arrow-spacing': 2, 'block-spacing': 2, 'key-spacing': 2, 'brace-style': 2, 'vue/camelcase': 2, 'vue/require-component-is': 0, 'vue/require-default-prop': 0, 'comma-dangle': [2, 'always-multiline'], 'vue/eqeqeq': [2, 'always', { null: 'ignore' }], 'object-curly-spacing': [2, 'always'], 'vue/singleline-html-element-content-newline': 0, 'vue/html-closing-bracket-newline': [ 2, { singleline: 'never', multiline: 'always', }, ], 'vue/max-attributes-per-line': 0, 'vue/html-self-closing': [ 2, { html: { void: 'always', normal: 'never', component: 'always', }, svg: 'always', math: 'always', }, ], // 設置 typescript-eslint 規則 // https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin/docs/rules '@typescript-eslint/camelcase': 0, // 目前埋點有部分字段無法更換 '@typescript-eslint/no-non-null-assertion': 0, // 允許非空斷言運算符 '@typescript-eslint/member-delimiter-style': [ 2, { multiline: { delimiter: 'none', requireLast: true, }, singleline: { delimiter: 'semi', requireLast: false, }, }, ], '@typescript-eslint/no-unused-vars': [0, { args: 'none' }], // TODO 后期逐步替換 '@typescript-eslint/interface-name-prefix': 0, '@typescript-eslint/explicit-function-return-type': 0, '@typescript-eslint/no-empty-function': 0, '@typescript-eslint/no-var-requires': 0, '@typescript-eslint/no-use-before-define': 0, '@typescript-eslint/no-explicit-any': 0, // TODO }, }
另附參考內容（若侵權請聯系本人刪除）供大家學習參考：
由於我們的項目配置可能不大一樣，有的是 vue-cli 自帶安裝的 ESLint 或者 TSLint，有的項目沒有 Lint 工具。給大家參考下 package.json ， 這個是 shopintar app 項目配置后的相關內容。
PS：這里有一個小坑，eslint 版本問題導致的 bug，所以 eslint 限制了版本號在 6.5.1
<!-- package.json 相關配置 --> { "scripts": { "format": "prettier --write \"src/**/*.ts\" \"src/**/*.vue\"", "lint": "eslint --fix --ext .ts,.vue src" }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "src/**/*.{ts,vue}": [ "prettier --write", "eslint --fix" ] }, "devDependencies": { "@typescript-eslint/eslint-plugin": "^2.21.0", "@typescript-eslint/parser": "^2.20.0", "eslint": "^6.5.1", "eslint-config-prettier": "^6.10.0", "eslint-plugin-prettier": "^3.1.2", "eslint-plugin-vue": "^5.2.3", "husky": "^4.2.3", "lint-staged": "^10.0.7", "prettier": "^1.19.1", "vue-eslint-parser": "^7.0.0", } }-
1、首先刪除 tslint.json 配置文件
-
2、安裝 eslint 相關依賴
npm i -D eslint@6.5.1 @typescript-eslint/parser @typescript-eslint/eslint-plugin@typescript-eslint/parser: ESLint 專門解析 TypeScript 的解析器
@typescript-eslint/eslint-plugin: 內置各種解析 TypeScript rules 插件 -
3、新建 .eslintrc.js 文件
parser: 'vue-eslint-parser', // 解析 .vue 文件 extends: [ 'plugin:@typescript-eslint/recommended', ], plugins: ['@typescript-eslint'], parserOptions: { parser: '@typescript-eslint/parser' // 解析 .ts 文件 },注意: parser: 'vue-eslint-parser'，這里要區分和 parserOptions.parser 的區別，vue-eslint-parser 是解析 .vue 文件，而 parserOptions.parser：@typescript-eslint/parser 是我們自定義來解析 TypeScript 文件的，否則就無法正確的檢驗 TypeScript 相關內容
二、安裝 eslint-plugin-vue
eslint-plugin-vue 插件是用來檢測和規范 Vue 代碼的風格
npm i -D eslint-plugin-vue
然后在 .eslintrc.js 新增配置和相關規則
extends: [ 'plugin:vue/recommended', // 這里也可以啟用其他規則，如默認的 vue/essential 'plugin:@typescript-eslint/recommended', ], rules: { ... }三、安裝 prettier
prettier 用來做格式化工具配合我們的 ESLint 可以更大的發揮作用，首先安裝相關依賴：
npm i -D prettier eslint-config-prettier eslint-plugin-prettiereslint-config-prettier: 這個插件的作用是當 ESLint 和 prettier 配置沖突時優先 prettier
eslint-plugin-prettier: 將 prettier 作為 ESLint 規范來使用
extends: [ 'plugin:vue/recommended', 'plugin:prettier/recommended', 'prettier/@typescript-eslint', // 優先 prettier 中的樣式規范 'plugin:@typescript-eslint/recommended', ],接着按需配置 prettier，新建 .prettierrc 文件
{ "singleQuote": true, "tabWidth": 2, "useTabs": false, "semi": false, "trailingComma": "all", "printWidth": 120 }到這里 ESLint 和 prettier 相關配置已經完成，接下來我們利用一些工具幫我們在 git commit 階段完成代碼格式化和校驗工作。
四、使用 husky 和 lint-staged 鈎子完成校驗與格式化
五、Vscode 相關配置
- 安裝
ESLint, Vertur, Prettier插件，如果你用stylus建議裝一個Manta's Stylus Supremacy - 配置
setting.json
{ "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "vetur.format.defaultFormatter.ts": "prettier", "vetur.format.defaultFormatter.js": "prettier", "vetur.format.defaultFormatter.less": "prettier", "vetur.format.defaultFormatter.stylus": "stylus-supremacy", "vetur.format.defaultFormatter.html": "prettyhtml", "vetur.format.defaultFormatterOptions": { "prettyhtml": { "printWidth": 120 } }, "eslint.options": { "extensions": [ ".js", ".vue", ".ts", ".tsx" ] }, // 以下為 stylus 配置 "stylusSupremacy.insertColons": false, // 是否插入冒號 "stylusSupremacy.insertSemicolons": false, // 是否插入分好 "stylusSupremacy.insertBraces": false, // 是否插入大括號 "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否換行 "stylusSupremacy.insertNewLineAroundBlocks": false }
setting.json可以直接復制在本地，也可以在項目中新建一個.vscode文件夾，然后在.gitignore中把.vscode去掉，這樣團隊都可以共享這部分 vscode 配置。
總結
通過以上幾步我們可以在 git commit 之前自動幫我們完成格式化和校驗的工作，但是值得注意的是，這里的格式化和校驗並不是全局的，而是我們當前提交的內容，如果我們想要格式化全局代碼或者校驗全局代碼，這里我們可以在 package.json 中的 script 寫個鈎子需要的時候手動執行一下，而不是把它放在 pre-commit 鈎子上每次 git commit 都執行，耗費時間。
"scripts": { "format": "prettier --write \"src/**/*.ts\" \"src/**/*.vue\"", "lint": "eslint --fix --ext .ts,.vue src" }另外各種插件因為版本問題導致的沖突一般都可以在對應插件的 github issues 中找到答案。