ESLint + TypeScript + Prettier 相关包与命令行详解

eslint + typescript + prettier 相关包

• eslint

  ESLint 的核心代码

• eslint-loader

  ESLint 加载器

• @typescript-eslint/parser

  ESLint 的解析器，用于解析 typescript，从而检查和规范 typescript 代码

• eslint-plugin-vue

  解析 vue 模板

• @vue/eslint-config-typescript

  vue 中对 typescript 写法的一些好的建议

• eslint-plugin-typescript：

  解析 typescript 模版，被 @typescript-eslint/eslint-plugin 替代

• @typescript-eslint/eslint-plugin：

  这是一个 ESLint 插件，用于解析 typescript 模版，包含了各类定义好的检测 typescript 代码的规范

• eslint-define-config

  为.eslintrc.js 文件提供 defineConfig 函数

• prettier

  prettier 插件的核心代码

• eslint-config-prettier

  解决 ESLint 中的样式规范和 prettier 中样式规范的冲突，以 prettier 的样式规范为准，使 ESLint 中的样式规范自动失效

• eslint-plugin-prettier

  将 prettier 作为 ESLint 规范来使用

• eslint-define-config

  在 .eslintrc.js 文件中，提供 eslint 配置项的一些快捷提示，类型检查等

• vue-eslint-parser

  提供 vue 语法解析

文档地址：[https://www.npmjs.com/package/eslint-define-config] 使用方法

// @ts-check
const { defineConfig } = require('eslint-define-config');

module.exports = defineConfig({
  root: true,
  rules: {
    // rules...
  },
});

webstorm 配置 eslint

eslint 命令行

• -c, --config 此选项允许您为 ESLint 指定其他配置文件

eslint -c ./.eslintrc.js ./src/views/demo/other/prettier.vue

• --ext 指定在您指定的目录中搜索 JavaScript 文件时，ESLint 将使用哪些文件扩展名。默认情况下，它使用 .js 唯一的文件扩展名。 例如，eslint lib/* --ext .js 将匹配目录内的所有文件 lib/，而不管其扩展名。

eslint ./src/views/demo/other --ext .vue

• --cache 存储有关处理文件的信息，以便仅对已更改的文件进行操作。缓存 .eslintcache 默认存储。启用此选项可以通过确保只更改已更改的文件来显着提高 ESLint 的运行时间。

• --quiet 该选项允许您禁用警告报告。如果启用此选项，则只有错误由 ESLint 报告。

• --max-warnings 此选项允许您指定警告阈值，如果您的项目中存在太多警告级别的规则违规，则可以使用该阈值强制 ESLint 以错误状态退出。

• --fix 该选项指示 ESLint 尝试尽可能多地解决问题。修复是针对实际文件本身进行的，只有剩余的未修复问题才会输出。并非所有问题都可以使用此选项解决，并且该选项在以下情况下不起作用：

package.json 中的 eslint 修复配置

"lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",