vue+typescript项目中eslint,tslint配置

志宝發表於 2020-3-7 16:52:00

Tslint配置主要配置文件如下：
<div class="cnblogs_code">
<pre>// 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"
]
}</pre>
</div>
<div class="cnblogs_code">
<pre>// 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 ]
}
}</pre>
</div>
Eslint配置文件如下：
<div class="cnblogs_code">
<pre>// .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': ,
'vue/eqeqeq': ,
'object-curly-spacing': ,
'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': , // 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
},
}</pre>
</div>
 
 
 
 
 
 
 
 
另附参考内容（若侵权请联系本人删除）供大家学习参考：
<blockquote dir="auto" data-sourcepos="11:1-11:237">
由于我们的项目配置可能不大一样，有的是 vue-cli 自带安装的 ESLint 或者 TSLint，有的项目没有 Lint 工具。给大家参考下 package.json ，这个是 shopintar app 项目配置后的相关内容。
</blockquote>
<blockquote dir="auto" data-sourcepos="13:1-13:174">
PS：这里有一个小坑，eslint 版本问题导致的 bug，所以 eslint 限制了版本号在 6.5.1
</blockquote>
<pre class="code highlight js-syntax-highlight plaintext white"><code>
{
"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",
}
}</code></pre>
<ul dir="auto" data-sourcepos="48:1-57:0">
<li data-sourcepos="48:1-48:43">
1、首先删除 tslint.json 配置文件
</li>
<li data-sourcepos="49:1-55:0">
2、安装 eslint 相关依赖
<code>npm i -D eslint@6.5.1 @typescript-eslint/parser @typescript-eslint/eslint-plugin</code>
<blockquote data-sourcepos="53:3-54:86">
@typescript-eslint/parser: ESLint 专门解析 TypeScript 的解析器 
@typescript-eslint/eslint-plugin: 内置各种解析 TypeScript rules 插件

</blockquote>

</li>
<li data-sourcepos="56:1-57:0">
3、新建 .eslintrc.js 文件

</li>

</ul>
<pre class="code highlight js-syntax-highlight plaintext white"><code>parser: 'vue-eslint-parser', // 解析 .vue 文件
extends: [
'plugin:@typescript-eslint/recommended',
],
plugins: ['@typescript-eslint'],
parserOptions: {
parser: '@typescript-eslint/parser' // 解析 .ts 文件
},</code></pre>
<blockquote dir="auto" data-sourcepos="69:1-69:383">
注意: parser: 'vue-eslint-parser'，这里要区分和 parserOptions.parser 的区别，vue-eslint-parser 是解析 .vue 文件，而 parserOptions.parser：@typescript-eslint/parser 是我们自定义来解析 TypeScript 文件的，否则就无法正确的检验 TypeScript 相关内容
</blockquote>
<h3 dir="auto" data-sourcepos="71:1-71:34">二、安装 eslint-plugin-vue</h3>
<code>eslint-plugin-vue</code> 插件是用来检测和规范 Vue 代码的风格
<code>npm i -D eslint-plugin-vue</code>
然后在 <code>.eslintrc.js</code> 新增配置和相关规则
<pre class="code highlight js-syntax-highlight plaintext white"><code>extends: [
'plugin:vue/recommended', // 这里也可以启用其他规则，如默认的 vue/essential
'plugin:@typescript-eslint/recommended',
],
rules: {
 ...
}</code></pre>
<h3 dir="auto" data-sourcepos="89:1-89:25">三、安装 prettier</h3>
prettier 用来做格式化工具配合我们的 ESLint 可以更大的发挥作用，首先安装相关依赖：
<pre class="code highlight js-syntax-highlight plaintext white"><code>npm i -D prettier eslint-config-prettier eslint-plugin-prettier</code></pre>
<blockquote dir="auto" data-sourcepos="97:1-98:74">
eslint-config-prettier: 这个插件的作用是当 ESLint 和 prettier 配置冲突时优先 prettier 
eslint-plugin-prettier: 将 prettier 作为 ESLint 规范来使用

</blockquote>
<pre class="code highlight js-syntax-highlight plaintext white"><code>extends: [
'plugin:vue/recommended',
'plugin:prettier/recommended',
'prettier/@typescript-eslint', // 优先 prettier 中的样式规范
'plugin:@typescript-eslint/recommended',
],</code></pre>
接着按需配置 prettier，新建 .prettierrc 文件
<pre class="code highlight js-syntax-highlight plaintext white"><code>{
"singleQuote": true,
"tabWidth": 2,
"useTabs": false,
"semi": false,
"trailingComma": "all",
"printWidth": 120
}</code></pre>
到这里 ESLint 和 prettier 相关配置已经完成，接下来我们利用一些工具帮我们在 git commit 阶段完成代码格式化和校验工作。
<h3 dir="auto" data-sourcepos="124:1-124:96">四、使用 husky 和 lint-staged 钩子完成校验与格式化</h3>
<h3 dir="auto" data-sourcepos="126:1-126:29">五、Vscode 相关配置</h3>
<ul dir="auto" data-sourcepos="128:1-130:0">
<li data-sourcepos="128:1-128:109">安装 <code>ESLint, Vertur, Prettier</code> 插件，如果你用 <code>stylus</code> 建议装一个 <code>Manta's Stylus Supremacy</code></li>
<li data-sourcepos="129:1-130:0">配置 <code>setting.json</code></li>
</ul>
<pre class="code highlight js-syntax-highlight plaintext white"><code>{
"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
}</code></pre>
<blockquote dir="auto" data-sourcepos="164:1-164:205">
<code>setting.json</code> 可以直接复制在本地，也可以在项目中新建一个 <code>.vscode</code> 文件夹，然后在 <code>.gitignore</code> 中把 <code>.vscode</code> 去掉，这样团队都可以共享这部分 vscode 配置。
</blockquote>
<h3 dir="auto" data-sourcepos="166:1-166:10">总结</h3>
通过以上几步我们可以在 <code>git commit</code> 之前自动帮我们完成格式化和校验的工作，但是值得注意的是，这里的格式化和校验并不是全局的，而是我们当前提交的内容，如果我们想要格式化全局代码或者校验全局代码，这里我们可以在 <code>package.json</code> 中的 <code>script</code> 写个钩子需要的时候手动执行一下，而不是把它放在 <code>pre-commit</code> 钩子上每次 <code>git commit</code> 都执行，耗费时间。
<pre class="code highlight js-syntax-highlight plaintext white"><code>"scripts": {
"format": "prettier --write \"src/**/*.ts\" \"src/**/*.vue\"",
"lint": "eslint --fix --ext .ts,.vue src"
}</code></pre>
另外各种插件因为版本问题导致的冲突一般都可以在对应插件的 <code>github issues</code> 中找到答案。 
来源：https://www.cnblogs.com/chenbeibei520/p/12435320.html

頁: [1]

琼殿技术论坛's Archiver

vue+typescript项目中eslint,tslint配置