Eslint & prettier & airbnb规范 配置

1.安装vscode的Eslint和prettier 插件

eslint：代码质量检查工具

https://eslint.nodejs.cn/docs/latest/use/getting-started

prettier：代码风格格式化工具

https://www.prettier.cn/docs/index.html

/*
eslint-config-airbnb-base airbnb 规范
eslint-import-resolver-typescript 解决@别名识别问题 
eslint-plugin-import 如果是npm yarn需要安装
*/
pnpm i eslint-config-airbnb-base eslint-plugin-import eslint-import-resolver-typescript  -D

eslint-config-airbnb-base airbnb ：airbnb代码质量规范

https://github.com/airbnb/javascript#events

eslint-import-resolver-typescript ： 解决@别名识别问题

https://www.npmjs.com/package/eslint-import-resolver-typescript

2.根目录下新建eslint规则配置文件

.eslintrc.js 修改规则

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    'airbnb-base',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier/skip-formatting'
    //  './.eslintrc-auto-import.json' 后面自动导入会用到
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  overrides: [
    {
      files: ['*.ts', '*.tsx', '*.vue'],
      rules: {
        // 解决 ts 全局类型定义后，eslint报错的问题
        'no-undef': 'off'
      }
    }
  ],
  settings: {
    'import/resolver': {
      typescript: {
        project: './tsconfig.*.json'
      }
    }
  },
  rules: {
    'import/no-extraneous-dependencies': 'off',
    // 对后缀的检测
    'import/extensions': [
      'error',
      'ignorePackages',
      { js: 'never', jsx: 'never', ts: 'never', tsx: 'never' }
    ],
    'import/order': [
      'error',
      {
        groups: [
          /* 
            builtin ：内置模块，如 path，fs等 Node.js内置模块。
            external ：外部模块，如 lodash ，react 等第三方库。
            internal ：内部模块，如相对路径的模块、包名前缀为 @ 的模块。
            unknown ：未知模块，如模块名没有指定扩展名或模块路径缺失扩展名。
            parent ：父级目录的模块。
            sibling ：同级目录的模块。
            index ：当前目录的 index 文件。
            object ：使用ES6 导入的模块。
            type ：使用 import type 导入的模块。
          */
          ['builtin', 'external'],
          'internal',
          ['parent', 'sibling'],
          'index',
          'type',
          'object',
          'unknown'
        ],
        pathGroups: [
          {
            pattern: '../**',
            group: 'parent',
            position: 'after'
          },
          {
            pattern: './*.scss',
            group: 'sibling',
            position: 'after'
          }
        ],
        // 不同组之间是否换行。
        'newlines-between': 'always',
        // 根据字母顺序对每组内的引用进行排序。
        alphabetize: {
          order: 'asc',
          caseInsensitive: true
        }
      }
    ],
   
  }
}

• 根目录新建忽略文件 .eslintignore

dist
node_modules
public
.husky
.vscode
.idea
*.sh
*.md

.eslintrc.cjs
.prettierrc.json
.stylelintrc.cjs

3.根目录下新建prettier配置文件

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "none"
}

段代码是Prettier代码格式化工具的配置文件的内容，通常存储为.prettierrc或prettier.config.js。Prettier是一个流行的代码格式化工具，用于确保代码的一致性和风格。下面是各个配置项的解释：

"$schema": 指向Prettier配置文件的JSON Schema定义。这个URL是Schema存储位置，它定义了哪些属性是有效的，以及各属性的数据类型等。这有助于支持JSON Schema的编辑器提供自动完成、类型校验等功能。

"semi": 设置为false表示在每条语句的末尾不自动添加分号。Prettier会根据这个配置来格式化代码，如果你更倾向于省略分号，这会是一个有用的配置。

"tabWidth": 设置代码的缩进宽度为2个空格。这个配置影响代码的可读性和布局，2是一个比较常见的选择，因为它既保持了代码的紧凑，也足够清晰。

"singleQuote": 设置为true表示使用单引号(')而不是双引号(")来包围字符串。这是代码风格的一个选择，不同的团队或项目可能有不同的偏好。

"printWidth": 设置一行代码的最大长度为100个字符。当代码长度超过这个阈值时，Prettier会尝试换行。这个配置有助于保持代码的可读性，尤其是在小屏幕或分屏编辑时。

"trailingComma": 设置为"none"表示在对象或数组最后一个元素后面不加逗号。这个配置项也是基于风格偏好的，一些人喜欢在最后一个元素后加上逗号（称为尾后逗号），因为这样在添加新元素时可以减少版本控制中的差异（只增加一行，而不是修改一行加一行）。

3.1两个prettier的配置例子，可根据个人需求更改

module.exports = {
  printWidth: 100, //单行长度
  tabWidth: 2, //缩进长度
  useTabs: false, //使用空格代替tab缩进
  semi: true, //句末使用分号
  singleQuote: true, //使用单引号
  quoteProps: 'as-needed', //仅在必需时为对象的key添加引号
  jsxSingleQuote: true, // jsx中使用单引号
  trailingComma: 'all', //多行时尽可能打印尾随逗号
  bracketSpacing: true, //在对象前后添加空格-eg: { foo: bar }
  jsxBracketSameLine: true, //多属性html标签的‘>’折行放置
  arrowParens: 'always', //单参数箭头函数参数周围使用圆括号-eg: (x) => x
  requirePragma: false, //无需顶部注释即可格式化
  insertPragma: false, //在已被preitter格式化的文件顶部加上标注
  proseWrap: 'preserve', //不知道怎么翻译
  htmlWhitespaceSensitivity: 'ignore', //对HTML全局空白不敏感
  vueIndentScriptAndStyle: false, //不对vue中的script及style标签缩进
  endOfLine: 'lf', //结束行形式
  embeddedLanguageFormatting: 'auto', //对引用代码进行格式化
};

module.exports = {
  printWidth: 200, //行宽
  semi: true, //分号
  singleQuote: true, // 使用单引号
  useTabs: false, //使用 tab 缩进
  tabWidth: 2, //缩进
  trailingComma: 'es5', //后置逗号，多行对象、数组在最后一行增加逗号
  arrowParens: 'avoid', //箭头函数只有一个参数的时候可以忽略括号
  bracketSpacing: true, //括号内部不要出现空格
  proseWrap: 'preserve', //换行方式 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
  parser: 'babylon', //格式化的解析器，默认是babylon
  endOfLine: 'auto', // 结尾是 \n \r \n\r auto
  jsxSingleQuote: false, // 在jsx中使用单引号代替双引号
  jsxBracketSameLine: false, //在jsx中把'>' 是否单独放一行
  stylelintIntegration: false, //不让prettier使用stylelint的代码格式进行校验
  eslintIntegration: false, //不让prettier使用eslint的代码格式进行校验
  tslintIntegration: false, // 不让prettier使用tslint的代码格式进行校验
  disableLanguages: ['vue'], // 不格式化vue文件，vue文件的格式化单独设置
  htmlWhitespaceSensitivity: 'ignore',
  ignorePath: '.prettierignore', // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
  requireConfig: false, // Require a 'prettierconfig' to format prettier
}

4.保存自动格式化当前文件

• 根目录下新建 .vscode/settings.json

// settings.json

{
  "typescript.tsdk": "node_modules/typescript/lib",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.fixAll.stylelint": "explicit"
  },
  "stylelint.validate": ["css", "scss", "less", "vue"],
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[ts]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}