安装

npm install --save-dev eslint babel-eslint eslint-plugin-prettier eslint-config-ruff

使用

在 .eslintrc.js 中使用：

module.exports = {
    extends: [
        'eslint-config-ruff',
    ]
};

扩展

Vue 项目

npm i --save-dev eslint babel-eslint vue-eslint-parser eslint-plugin-vue eslint-config-ruff

并在 .eslintrc.js 中引用：

module.exports = {
    extends: [
        'eslint-config-ruff',
        'eslint-config-ruff/vue', // 注意顺序
    ],
};

Vue3 Tyepscript 项目

npm i --save-dev eslint babel-eslint eslint-plugin-vue eslint-plugin-prettier typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-ruff

并在 .eslintrc.js 中引用：

module.exports = {
    extends: [
        'eslint-config-ruff',
        'eslint-config-ruff/vue3-with-typescript'
    ],
};

React 项目

如果需要检测 React 相关的代码，需要安装相关插件：

npm install --save-dev eslint babel-eslint eslint-plugin-react eslint-plugin-prettier eslint-config-ruff

并在 .eslintrc.js 中引用：

module.exports = {
    extends: [
        'eslint-config-ruff',
        'eslint-config-ruff/react'
    ]
};

会自动检测本地 React 的版本，默认情况下无需其它配置。

TypeScript

如果需要检测 TypeScript 代码，需要安装相关插件：

npm install --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-prettier eslint-config-ruff

除此之外，需要先安装typescript包，并在项目根目录有tsconfig.json文件。

并在.eslintrc.js中引用：

module.exports = {
    extends: [
        'eslint-config-ruff',
        'eslint-config-ruff/typescript'
    ],
};

格式化

在 package.json 中添加

"scripts": {
  "lint": "eslint .",
  "lint:fix": "eslint . --fix"
},

VSCode ESLint 与 Prettier 冲突解决

VSCode 设置默认 ESLint 插件格式化