vue+typescript项目中eslint,tslint配置

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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 相关配置 -->
{
  },
    }
  },
    ]
  },
  }
}

1、首先删除 tslint.json 配置文件
2、安装 eslint 相关依赖

npm i -D [email protected] @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-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 文件

{
}

到这里 ESLint 和 prettier 相关配置已经完成，接下来我们利用一些工具帮我们在 git commit 阶段完成代码格式化和校验工作。

使用 husky 和 lint-staged 钩子完成校验与格式化

五、Vscode 相关配置

安装 ESLint, Vertur, Prettier 插件，如果你用 stylus 建议装一个 Manta's Stylus Supremacy
配置 setting.json

{
  },
    }
  },
    ]
  },
  // 以下为 stylus 配置
}

setting.json 可以直接复制在本地，也可以在项目中新建一个 .vscode 文件夹，然后在 .gitignore 中把 .vscode 去掉，这样团队都可以共享这部分 vscode 配置。

总结

通过以上几步我们可以在 git commit 之前自动帮我们完成格式化和校验的工作，但是值得注意的是，这里的格式化和校验并不是全局的，而是我们当前提交的内容，如果我们想要格式化全局代码或者校验全局代码，这里我们可以在 package.json 中的 script 写个钩子需要的时候手动执行一下，而不是把它放在 pre-commit 钩子上每次 git commit 都执行，耗费时间。

另外各种插件因为版本问题导致的冲突一般都可以在对应插件的 github issues 中找到答案。