@anjianshi/eslint-config
v2.0.0
Published
公共 ESLint rules
Downloads
24
Readme
公共 ESLint Configs
设计思路
从简
少开启规则,目标为“减少 bug 率”,而不是限制代码风格。
不关注”代码样式“
参考 此文章 的建议,不开启代码样式规则,
由专门的格式化工具(Prettier
+ @anjianshi/prettier-config
)来控制它们。
被排除的规则列表,主要包括 ESLint 自身 Layout & Formatting
段落的全部规则和 TypeScript、React 插件的许多规则。
配置文件列表
base: 基础 JavaScript 规则
typescript: TypeScript 规则
react: React App 规则
node: Node.js 环境下的规则
typescript
、react
、node
都包括了base
的内容。react
并未包含typescript
,如需用typescript
写 React 应用,则两个都要引用。
如何使用
安装
yarn add --dev eslint @anjianshi/eslint-config
配置 ESLint
建立一个 .eslintrc.js
文件:
(若项目指定了 { "type": "module" }
,则要命名为 .eslintrc.cjs
)
module.exports = {
extends: [
'@anjianshi/eslint-config/base',
...
]
}
配置 TypeScript
安装 TypeScript:
yarn add --dev typescript
@anjianshi/eslint-config/typescript
要求当前 ESLint 配置文件的同级目录里有一个tsconfig.json
。
如果它在别的位置,则需在配置文件里指明:module.exports = { extends: [ '@anjianshi/eslint-config/base', '@anjianshi/eslint-config/typescript', ], parserOptions: { project: './src/tsconfig.json', }, }
如果在 TypeScript 项目里启用了 Node.js 原生 ES6 Module 或配置了 alias,
则eslint-import-plugin
需要配合eslint-import-resolver-typescript
才能正确解析文件引用。安装此依赖后,在 ESLint 配置里指明项目路径:
{ settings: { 'import/resolver': { typescript: { project: './' } } } }
配置 VSCode
一、安装 VSCode 插件 ESLint
二、修改 VSCode 设置(Code - Preferences - Settings)
{
"editor.tabSize": 2,
"files.insertFinalNewline": true,
"files.trimTrailingWhitespace": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"html",
],
"eslint.workingDirectories": [{ "mode": "auto" }],
}
三、关于 ESLint workingDirectories 若 VSCode 的 workspace 配置成类似如下目录结构:
projects/ // /Users/me/office/projects/
proj-1/
proj-2/
...
library/ // /Users/me/library/
lib-1/
lib-2/
也就是,workspace 下添加了多个独立的文件夹,每个独立文件夹下又有多个项目。
在开发这些项目(proj-1
、lib-1
...)时,VSCode 默认会把顶层目录作为 ESLint 的 workingDirectory
,从那个目录下加载插件等依赖,导致找不到依赖。
在 VSCode 配置里指定 { "mode": "auto" }
可解决此问题,它会让 VSCode 把 package.json
存在的目录作为 workingDirectory
,也就能正常引入依赖了。
开发说明
如何更新 ESLint 规则
看 ESLint 及各插件的 ChangeLog,来补充、移除、调整规则定义。 (规则文件里只定义和默认值不同的规则,例如默认不开启,也没准备开启的规则就不写下来)