eslint-config 配置

TIP

eslint-config 是一个 eslint + prettier 的配置文件，用于统一项目中的 eslint 配置，避免每个项目都需要配置一遍 eslint

• ESLint 是一款语法检测工具,主要用来检查代码 是否符合规范, 是否有语法错误 等等。它可以帮助我们规范代码,提高代码质量。
• Prettier是一个代码格式化插件。它并不关心你的语法是否正确，只关心代码格式，比如是否使用单引号，语句结尾是否使用分号等等。专注于代码格式化的工具，对代码不做质量检查

依赖介绍

     // ts 解析器
    "@typescript-eslint/eslint-plugin": "^6.7.5",
    "@typescript-eslint/parser": "^6.7.5",

    // 解决 eslint prettier 冲突(主prettier)
    "eslint-config-prettier": "^9.0.0",

    // eslint 配置文件规则
    "eslint-define-config": "^1.24.1",

    // 顶部import的导入顺序校验
    "eslint-plugin-import": "^2.28.1",

    // tsdoc 文档注释格式校验
    "eslint-plugin-tsdoc": "^0.2.17",

    // vue 解析
    "eslint-plugin-vue": "^9.17.0",

    // prettier 格式校验
    "prettier": "^3.0.3"

使用方式

配置 eslint

1. 在项目根目录下创建 .eslintrc.cjs 文件
2. 在 .eslintrc.cjs 文件中添加如下代码

module.exports = {
  root: true,
  extends: ['@mid-vue/eslint-config'],
}

配置 prettier

1. 在项目根目录下创建 .prettierrc.cjs 文件
2. 在 .prettierrc.cjs 文件中添加如下代码

module.exports = {
  //一行最多 100 字符
  printWidth: 100,

  //是否使用分号
  semi: false,
  //是否使用单引号
  singleQuote: true,
  jsxSingleQuote: true,

  //结束符是否单独一行
  bracketSameLine: true,
  jsxBracketSameLine: false,

  // 对象中的空格间距 默认true
  bracketSpacing: true,

  // 多余的逗号
  trailingComma: 'none',

  //html 每个属性是否一行
  singleAttributePerLine: false,

  //空格是否敏感, css(同css一样) , strict(空格敏感)
  htmlWhitespaceSensitivity: 'ignore',

  //箭头函数 单个参数括号 默认avoid(去掉) 可选 avoid| always
  arrowParens: 'avoid',
}

自动格式化(保存时)

1. 在项目根目录下创建 .vscode/settings.json 文件
2. 在 .vscode/settings.json 文件中添加如下代码

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
   "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
}