Appearance
npm
sh
npm i @eslint/js@10.0.1 eslint@9.39.4 eslint-config-prettier@10.1.8 eslint-plugin-prettier@5.5.5 fs-extra@11.3.4 globals@17.6.0 prettier@3.8.3 typescript-eslint@8.59.1 ts-node@10.9.2 eslint-plugin-import@2.32.0 eslint-import-resolver-typescript@4.4.4 -D
npx tsc --init修改 tsconfig.json
json
{
"compilerOptions": {
"target": "es2016",
"module": "node16",
"moduleResolution": "node16",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": false,
// 开启严格空类型检查,让 null / undefined 参与类型检查和推导
"strictNullChecks": true,
// 需要注释掉或者设置为 false,因为 eslint 中已经处理了未使用的变量,会造成重复警告
// "noUnusedLocals": true,
// "noUnusedParameters": true,
"skipDefaultLibCheck": true,
"skipLibCheck": true,
"outDir": "dist",
"rootDir": "src"
},
"include": ["src"]
}.prettier
json
{
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "none",
"arrowParens": "avoid"
}eslint.config.js
js
import js from '@eslint/js'
import { defineConfig } from 'eslint/config'
import pluginImport from 'eslint-plugin-import'
import pluginPrettier from 'eslint-plugin-prettier'
import globals from 'globals'
import tseslint from 'typescript-eslint'
export default defineConfig([
// 继承 js 官方推荐规则
js.configs.recommended,
// 继承 ts 官方推荐规则
...tseslint.configs.recommended,
// 继承 import 插件推荐规则
pluginImport.flatConfigs.recommended,
{
files: ['**/*.{js,mjs,cjs,ts}'],
languageOptions: {
// 声明运行在 nodejs 环境
globals: globals.node,
// 支持最新 es 语法
ecmaVersion: 'latest',
// 使用 es module
sourceType: 'module'
},
rules: {
// 以下规则全部移至 .prettierrc 文件,通过让 prettier 作为 eslint 规则实现这
// 些功能,eslint 只做语法检查
// semi: ['error', 'never'], // 必须加分号,改为 "never" 表示不加分号
// quotes: ['error', 'single'], // 必须用双引号,改为 "double" 表示双引号
// indent: ['error', 2], // 2 空格缩进
// 'arrow-parens': ['error', 'as-needed'], // 允许箭头函数只有一个参数时省略括号
// 'comma-dangle': ['error', 'never'], // 允许最后一个属性后不加逗号
// 处理未使用的变量给警告提示,no-unused-vars 和 @typescript-eslint/no-unused-vars
// 只要开启其中一个就可以,否则会造成重复警告,同时需要把 tsconfig.json 中的
// noUnusedLocals 和 noUnusedParameters 注释掉或者设置为 false,不然也会
// 重复警告,因此都不处理的话同一个错会出现三次警告
'no-unused-vars': ['warn'],
'@typescript-eslint/no-unused-vars': 'off',
// ts 通过声明完成的变量还是会被 eslint 的 no-undef 标记为未定义,需要关闭
'no-undef': 'off',
// 允许声明为 any 类型
'@typescript-eslint/no-explicit-any': 'off',
// 允许 ts 注释,如 // @ts-ignore
'@typescript-eslint/ban-ts-comment': 'off',
// 启用 prettier 作为 eslint 规则,eslint 只做 js 代码检测
'prettier/prettier': 'error',
// 排序规则
'import/order': [
'error',
{
groups: [
'builtin', // 1.node 内置模块(fs...)
'external', // 2.第三方包(vue...)
'internal', // 3.项目内部文件(@/utils...)
'parent', // 4.父级文件(../xxx)
'sibling', // 5.同级文件(./xxx)
'index' // 6.入口文件
],
// 不同分组之间空一行
'newlines-between': 'always',
// 按字母顺序排序同时不区分大小写
alphabetize: { order: 'asc', caseInsensitive: true },
pathGroups: [
// @/ 开头的路径归为内部模块
{ pattern: '@/**', group: 'internal', position: 'before' }
],
// node 内置模块不被 pathGroups 规则影响,否则内部模块可能会排到 node 内置
// 模块上面
pathGroupsExcludedImportTypes: ['builtin']
}
]
},
settings: {
// 解析器配置
'import/resolver': {
// 支持 typescript
typescript: true,
// 支持 node
node: true
}
},
// prettier 作为 eslint 规则,格式错误会直接在 ide 里标红
plugins: { prettier: pluginPrettier }
}
]).vscode/setting.json
json
{
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
// 换行符使用 lf,而不是 crlf
"files.eol": "\n"
}