/typescript-eslint/tree/master/packages/eslint-plugin#recommended-configs */ "plugin:@typescript-eslint /recommended", "prettier" ], "parser": "@typescript-eslint/parser", "parserOptions": { ": [ "types/env.d.ts", "node_modules/**", "**/dist/**" ], "rules": { "@typescript-eslint /no-unused-vars": "error", "@typescript-eslint/no-var-requires": "off", "@typescript-eslint/consistent-type-imports ": "error", "@typescript-eslint/explicit-module-boundary-types": "off", // "space-before-blocks
/parser', rules: { '@typescript-eslint/no-unused-vars': 'error', '@typescript-eslint 依赖安装 npm install --save-dev \ eslint \ prettier \ @typescript-eslint/parser \ @typescript-eslint 依赖安装 npm install --save-dev \ eslint \ prettier \ @typescript-eslint/parser \ @typescript-eslint ', '@typescript-eslint/explicit-function-return-type': 'warn', '@typescript-eslint/no-explicit-any ': 'error', '@typescript-eslint/no-unsafe-assignment': 'error', '@typescript-eslint/no-unsafe-call
/explicit-module-boundary-types': 'off', '@typescript-eslint/no-explicit-any': 'off', '@typescript-eslint /no-non-null-assertion': 'off', '@typescript-eslint/no-non-null-asserted-optional-chain': 'off', '@typescript-eslint/consistent-type-imports': [ 'error', { disallowTypeAnnotations: false }, ], '@typescript-eslint/ban-ts-comment': ['off', { 'ts-ignore': false }], // vue /eslint-plugin": "^5.30.0", "@typescript-eslint/parser": "^5.30.0", "eslint-config-prettier":
ESLint 自定义示例:TypeScript 如果你使用 ESLint 来检查 TypeScript 代码,那么你希望使用所有三种自定义: 解析器:@typescript-eslint/parser支持解析 TypeScript 代码 插件:@typescript-eslint/eslint-plugin加载特定于 TypeScript 的规则 共享配置:与@typescript-eslint/eslint-plugin 一起打包的共享设置,可以一次性配置许多规则,例如plugin:@typescript-eslint/recommended。 请注意,typescript-eslint 的共享配置来自@typescript-eslint/eslint-pluginnpm 包。 **我们在typescript-eslint 格式化常见问题解答和typescript-eslint 性能故障排除文档中甚至明确建议不要使用eslint-plugin-prettier。
[0, "single"], // 方法前是否要一个空格 always: 总是要 "space-before-function-paren": [0, "never"], "@typescript-eslint /no-explicit-any": "off", "@typescript-eslint/no-empty-function": "off", "@typescript-eslint/ no-unused-vars": "off", "@typescript-eslint/camelcase": "off", "@typescript-eslint/no-this-alias
/eslint-plugin@latest @typescript-eslint/parser@latest √ Would you like to install them now? /eslint-plugin": "^5.59.2", "@typescript-eslint/parser": "^5.59.2", "@vitejs/plugin-vue": "^4.1.0 /no-explicit-any": ["off"], "@typescript-eslint/no-this-alias": [ "error", { /ban-ts-comment": "off", // 允许使用非空断言 "@typescript-eslint/no-non-null-assertion": "off", " /eslint-plugin@latest @typescript-eslint/parser@latest ?
/eslint-plugin @typescript-eslint/parser --dev # 对ts的支持 编写对应的配置文件 .eslintrc.js ; const { defineConfig /consistent-type-definitions': ['error', 'interface'], '@typescript-eslint/no-explicit-any': 'off ', // 可以使用 any 类型 '@typescript-eslint/explicit-module-boundary-types': 'off', // 解决使用 require 的问题 '@typescript-eslint/no-var-requires': 0, // https://github.com/typescript-eslint/typescript-eslint /blob/main/packages/eslint-plugin/docs/rules/ban-types.md '@typescript-eslint/ban-types': [
四、工程 1、代码检查 2019 年 1 月,TypeScirpt 官方决定全面采用 ESLint 作为代码检查的工具,并创建了一个新项目 typescript-eslint,提供了 TypeScript 文件的解析器 @typescript-eslint/parser 和相关的配置选项 @typescript-eslint/eslint-plugin 等。 @typescript-eslint/eslint-plugin 它作为 eslint 默认规则的补充,提供了一些额外的适用于 ts 语法的规则。 /consistent-type-definitions 是 @typescript-eslint/eslint-plugin 新增的规则。 安装: npm install --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
/parser @typescript-eslint/eslint-plugin --save-dev 描述: eslint: EsLint的核心代码 @typescript-eslint/parser :ESLint的解析器,用于解析typescript,从而检查和规范Typescript代码 @typescript-eslint/eslint-plugin:这是一个ESLint插件,包含了各类定义好的检测 /recommended' ], parserOptions: { ecmaVersion: 12, parser: '@typescript-eslint /parser', sourceType: 'module', }, plugins: ['vue', '@typescript-eslint'], rules: : ['vue', '@typescript-eslint'], rules: {} } 描述: prettier/@typescript-eslint:使得@typescript- eslint
引入 eslint 安装 eslint prettier 依赖 @typescript-eslint/parser @typescr ipt-eslint/eslint-plugin 为 eslint '@typescript-eslint/ban-ts-ignore': 'off', '@typescript-eslint/explicit-function-return-type': 'off ', '@typescript-eslint/no-explicit-any': 'off', '@typescript-eslint/no-var-requires': 'off', /ban-ts-comment': 'off', '@typescript-eslint/ban-types': 'off', '@typescript-eslint/no-non-null-assertion ': 'off', '@typescript-eslint/explicit-module-boundary-types': 'off', '@typescript-eslint/no-unused-vars
@typescript-eslint/eslint-plugin 它作为 eslint 默认规则的补充,提供了一些额外的适用于 ts 语法的规则。 npm install --save-dev @typescript-eslint/eslint-plugin 创建配置文件§ ESLint 需要一个配置文件来决定对哪些规则进行检查,配置文件的名称一般是 : ['@typescript-eslint'], rules: { // 禁止使用 var 'no-var': "error", // 优先使用 /consistent-type-definitions 是 @typescript-eslint/eslint-plugin 新增的规则。 安装: npm install --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
解析器里没有包含ts语法内容的解析器,所以,我们需要使用ts为eslint开发的解析器 解决方法: 确保安装了eslint以及ts eslint解析器 npm install --save-dev eslint @typescript-eslint /parser @typescript-eslint/eslint-plugin 修改eslint配置文件 .eslintrc.js 中的解析器的配置项,配置内容如下 module.exports = browser: true, mocha: true, node: true, es6: true, commonjs: true }, plugins: [ '@typescript-eslint /eslint-plugin', // 加载插件,使其对代码进行处理 'react', 'import' ], parser: '@typescript-eslint/parser ': [1, { vars: 'all', args: 'after-used' }], // 不能有声明后未被使用的变量或参数 'no-unused-vars': 'off', '@typescript-eslint
TypeScript 解析器转移至 Github 的 typescript-eslint/parser。 官方都放弃了我们也没必要太坚持,而且通过 ESLint 加上 ts 插件都可以完成检查 集成过程 首先安装依赖: yarn add @typescript-eslint/parser @typescript-eslint @typescript-eslint/eslint-plugin:这是一个 ESLint 插件,包含了各类定义好的检测 Typescript 代码的规范。 module.exports = { parser: '@typescript-eslint/parser', //定义ESLint的解析器 extends: ['plugin:@typescript-eslint prettier/@typescript-eslint 是用来忽略 typescript 中的格式化配置。
true, es2021: true, }, extends: [ 'plugin:react/recommended', 'airbnb-base', ], parser: '@typescript-eslint /parser @typescript-eslint/eslint-plugin在项目中使用npx eslint或配置IDE(如VSCode)的ESLint插件来进行实时检查。 /recommended', 'plugin:prettier/recommended', ], parser: '@typescript-eslint/parser', parserOptions : { ecmaVersion: 2020, sourceType: 'module', }, plugins: ['@typescript-eslint', 'prettier'], 使用ESLint的插件和共享配置插件@typescript-eslint:为TypeScript提供额外的规则和错误修复。eslint-plugin-import:检查导入顺序和导出规范。
npm install typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev 然后修改 .eslintrc.json 比如对于这个 @typescript-eslint 插件里面的缩进规则,他们会往 rules 数组中添加一条这样的规则: "@typescript-eslint/indent": ["error", 2 { "parser": "@typescript-eslint/parser", "extends": ["plugin:@typescript-eslint/recommended", "eslint 在我们的例子中,使用了 prettier/@typescript-eslint,但其实我们也可以用 prettier/react 或 prettier/vue。 Conflict with custom rule 在 rules 数组中自定义的规则会覆盖 prettier/@typescript-eslint 配置。
目前支持的规则集包括: 通用规则@typescript-eslint 安全规则@security 性能规则@performance 预览规则@previewer 一次开发多端部署规则@cross-device-app-dev 不在工程根目录新建code-linter.json5文件的情况下,Code Linter默认会检查@performance/recommended和@typescript-eslint/recommended build/**/*", //字符串类型 "node_modules/**/*" ], "ruleSet": //设置检查待应用的规则集 [ "plugin:@typescript-eslint /recommended" //快捷批量引入的规则集, 枚举类型:plugin:@typescript-eslint/all, plugin:@typescript-eslint/recommended off { "ignoreRestArgs": true //规则特定的开关配置, 为可选项, 不同规则其下层的配置项不同 } ], "@typescript-eslint
console.log("This project is new-typescript-project.")})();六、使用 ESLint 规范代码6.1 安装依赖npm install eslint @typescript-eslint /parser @typescript-eslint/eslint-plugin eslint-plugin-prettier -D6.2 新增配置文件 eslint.config.cjstouch eslint.config.cjsconst tsPlugin = require('@typescript-eslint/eslint-plugin');const tsParser = require('@typescript-eslint/ /tsconfig.json'], tsconfigRootDir: __dirname } }, plugins: { '@typescript-eslint : { ...tsRecommendedRules, 'prettier/prettier': 'error', 'no-console': 'off', '@typescript-eslint
或者你也可以不让他下载而手动使用 yarn 安装 yarn add eslint-plugin-react@^7.14.3 @typescript-eslint/eslint-plugin@latest ^6.1.0 eslint-plugin-import@^2.18.2 eslint-plugin-jsx-a11y@^6.2.3 eslint-plugin-react-hooks@^1.7.0 @typescript-eslint /parser@latest --dev 需要安装的 packages 本地安装这些包, ** 不要安装到 global** eslint-plugin-react@^7.14.3 @typescript-eslint eslint-plugin-import@^2.18.2 eslint-plugin-jsx-a11y@^6.2.3 eslint-plugin-react-hooks@^1.7.0 以及一些可能需要的其他 Package @typescript-eslint
/package/@typescript-eslint/parser @typescript-eslint/eslint-plugin:https://www.npmjs.com/package/@typescript-eslint /eslint-plugin eslint-plugin-simple-import-sort @typescript-eslint/parser @typescript-eslint/eslint-plugin ": 0, "class-methods-use-this": "off", "@typescript-eslint/no-unused-vars": [ "error", /no-use-before-define": "off", "@typescript-eslint/ban-ts-comment": "off", "@typescript-eslint Allowed unused vars must match /^_/u @typescript-eslint/no-unused-vars 7:7 error 't_s' is assigned
如果你在 TypeScript 函数中使用了可选参数,但是 ESLint 报错了,你可以通过以下方法进行解决: 在函数定义的地方添加一个注释 // eslint-disable-next-line @typescript-eslint : number) { // eslint-disable-next-line @typescript-eslint/no-unused-vars // 使用了可选参数 `param2`,但是未在代码中使用 console.log(param1); } 在 ESLint 配置文件中禁用 @typescript-eslint/no-unused-vars 规则。 { "rules": { "@typescript-eslint/no-unused-vars": "off" } } 如果你需要在代码中使用可选参数,但是 ESLint 的规则认为它是未使用的