Skip to content

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"
}