vue+typescript项⽬中eslint,tslint配置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
// repo.advai/advgit/atome-fe/docs/-/blob/1667c9156ed5fa16584e510c550b5ec0f95ad627/standard/.eslintrc.js
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': v.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': v.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 规则
// github/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 版本问题导致的，所以 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
svg和ai格式区别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-prettier
eslint-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 阶段完成代码格式化和校验⼯作。四、
五、Vscode 相关配置
安装ESLint, Vertur, Prettier插件，如果你⽤stylus建议装⼀个Manta's Stylus Supremacy
配置setting.json
{
"editor.formatOnSave": true,
"deActionsOnSave": {
"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中到答案。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。