下載相關(guān)依賴

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier stylelint stylelint-config-css-modules stylelint-config-standard stylelint-less stylelint-order  -D

版本號(hào)如下

{
    "@typescript-eslint/eslint-plugin": "^5.57.0",
    "@typescript-eslint/parser": "^5.57.0",
    "eslint": "^8.36.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.2",
    "prettier": "^2.8.7",
    "stylelint": "^14.6.1",
    "stylelint-config-css-modules": "^4.1.0",
    "stylelint-config-standard": "^25.0.0",
    "stylelint-less": "^1.0.6",
    "stylelint-order": "^5.0.0",
}

eslint: ESLint的核心代碼
@typescript-eslint/parser：ESLint的解析器分预，用于解析typescript，從而檢查和規(guī)范Typescript代碼
@typescript-eslint/eslint-plugin：這是一個(gè)ESLint插件计济，包含了各類定義好的檢測(cè)Typescript代碼的規(guī)范
prettier：prettier插件的核心代碼
eslint-config-prettier：解決ESLint中的樣式規(guī)范和prettier中樣式規(guī)范的沖突，以prettier的樣式規(guī)范為準(zhǔn)，使ESLint中的樣式規(guī)范自動(dòng)失效
eslint-plugin-prettier：將prettier作為ESLint規(guī)范來使用
stylelint：stylelint的核心代碼
stylelint-config-css-modules：提供了一個(gè)預(yù)設(shè)的規(guī)則集合金度，用于幫助開發(fā)者檢查或修復(fù)CSS模塊化開發(fā)中的問題本讥。使用該包的目的是為了提高代碼的可維護(hù)性和一致性珊泳，避免樣式命名沖突與重復(fù)，并且能夠幫助開發(fā)者把握CSS模塊化開發(fā)的最佳實(shí)踐拷沸。
stylelint-config-standard：預(yù)設(shè)的Stylelint配置文件色查，其定義了一組約定俗成的代碼規(guī)則和最佳實(shí)踐，可以幫助開發(fā)者避免一些常見的CSS錯(cuò)誤和問題撞芍，保持代碼風(fēng)格的統(tǒng)一性和可維護(hù)性
stylelint-less：對(duì)Less文件進(jìn)行語法檢查和規(guī)則校驗(yàn)秧了。它能夠識(shí)別Less中的變量、混合函數(shù)等特性勤庐，并提供了相應(yīng)的規(guī)則校驗(yàn)
stylelint-order：用于樣式表（CSS示惊、Sass、Less等）中規(guī)則的排序和風(fēng)格檢查工具

配置相關(guān)文件

1愉镰、新建.eslintrc.js文件

module.exports = {
  parser: "@typescript-eslint/parser",
  extends: [
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "eslint-config-prettier",
    "plugin:prettier/recommended",//覆蓋eslint
  ], //使用推薦的React代碼檢測(cè)規(guī)范
  plugins: ["@typescript-eslint"],
  env: {
    browser: true,
    node: true,
  },
  settings: {
    //自動(dòng)發(fā)現(xiàn)React的版本米罚，從而進(jìn)行規(guī)范react代碼
    react: {
      pragma: "React",
      version: "detect",
    },
  },
  parserOptions: {
    //指定ESLint可以解析JSX語法
    ecmaVersion: 2019,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: {},
};

2、新建.prettierrc.js文件

module.exports = {
  "printWidth": 120,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": false,
  "jsxBracketSameLine": true,
  "arrowParens": "avoid",
  "insertPragma": true,
  "tabWidth": 4,
  "useTabs": false  
};

3丈探、新建.stylelintrc.js文件

module.exports = {
  processors: [],
  plugins: ['stylelint-order'],
  extends: ['stylelint-config-standard', 'stylelint-less', 'stylelint-config-css-modules'],
  rules: {
    'no-empty-source': true,
    'selector-class-pattern': null,
    'selector-id-pattern': null,
    'at-rule-no-unknown': null,
    'order/properties-order': [
      // 規(guī)則順序
      'position',
      'top',
      'right',
      'bottom',
      'left',
      'z-index',
      'display',
      'float',
      'width',
      'height',
      'max-width',
      'max-height',
      'min-width',
      'min-height',
      'padding',
      'padding-top',
      'padding-right',
      'padding-bottom',
      'padding-left',
      'margin',
      'margin-top',
      'margin-right',
      'margin-bottom',
      'margin-left',
      'margin-collapse',
      'margin-top-collapse',
      'margin-right-collapse',
      'margin-bottom-collapse',
      'margin-left-collapse',
      'overflow',
      'overflow-x',
      'overflow-y',
      'clip',
      'clear',
      'font',
      'font-family',
      'font-size',
      'font-smoothing',
      'osx-font-smoothing',
      'font-style',
      'font-weight',
      'line-height',
      'letter-spacing',
      'word-spacing',
      'color',
      'text-align',
      'text-decoration',
      'text-indent',
      'text-overflow',
      'text-rendering',
      'text-size-adjust',
      'text-shadow',
      'text-transform',
      'word-break',
      'word-wrap',
      'white-space',
      'vertical-align',
      'list-style',
      'list-style-type',
      'list-style-position',
      'list-style-image',
      'pointer-events',
      'cursor',
      'background',
      'background-color',
      'border',
      'border-radius',
      'content',
      'outline',
      'outline-offset',
      'opacity',
      'filter',
      'visibility',
      'size',
      'transform',
    ],
  },
}

以上便可以在項(xiàng)目中啟用Eslint+prettier+styleLint來規(guī)范項(xiàng)目代碼录择，如果在項(xiàng)目需忽略指定文件的檢查則可分別配置.eslintignore、.stylelintignore文件

另外我們往往需要在git提交前檢查我們的代碼是否符合規(guī)范，因此我們借助husky和lint-staged來創(chuàng)建hook

安裝依賴

npm install husky lint-staged -D

版本號(hào)如下：

{
   "husky": "^8.0.3",
    "lint-staged": "^13.2.0",
}

在項(xiàng)目根目錄執(zhí)行husky install生成.husky目錄

npx husky install

其他同事拉取項(xiàng)目時(shí)隘竭，他們可能會(huì)忘記執(zhí)行上面的命令啟用 git hook塘秦。但有一個(gè)命令他們是一定會(huì)執(zhí)行的，就是執(zhí)行 npm install 或 yarn 去安裝依賴动看。
于是我們需要利用 npm script 的生命周期腳本尊剔，加上一個(gè) prepare。prepare 會(huì)在 install 之后執(zhí)行菱皆。

// package.json
{
  "scripts": {
   // ...
    "prepare": "husky install"
  }
}

創(chuàng)建hook

npx husky add .husky/pre-commit "npx --no-install lint-staged"

創(chuàng)建的腳本內(nèi)容如下：

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no-install lint-staged

在package.json中新建內(nèi)容如下：

// package.json
{
  "lint-staged": {
    "src/**/*.{ts,tsx}": [
      "eslint --max-warnings=0"
    ],
    "src/**/*.{css,less}": [
      "stylelint"
     ]
  }
}

至此须误，則 lint-staged 就設(shè)置完成，當(dāng)再次使用 git commit 提交代碼的時(shí)候仇轻，就會(huì)先執(zhí)行代碼檢查京痢、樣式表檢查之類的動(dòng)作，并且是增量代碼檢查篷店。

跳過 git hooks

如果我們想要跳過 commit 相關(guān)的hook祭椰，可以使用在腳本命令中加上 --no-verify 參數(shù)，如下所示：

git commit -m '跳過hook' --no-verify

如果我們使用vscode編輯器疲陕，可配置保存自動(dòng)通過eslint格式化和styleLint代碼
下載vscode插件 ESlint 方淤、 prettier、styleLint 然后配置settings.json文件

{
    "editor.codeActionsOnSave": {
        "source.fixAll.stylelint": true,
        "source.fixAll.eslint": true 
    },
   "eslint.validate": [ //確定校驗(yàn)準(zhǔn)則
        "javascript",
        "javascriptreact",
        "html",
        "vue",
        "typescript",
        "typescriptreact",
    ],
}

另外我們可以通過配置.editorconfig 定義項(xiàng)目中代碼格式的一些規(guī)則

root = true

[*]
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
end_of_line = lf

[*.md]
trim_trailing_whitespace = false

思考：

1鸭轮、.editorconfig 和 eslint 不會(huì)沖突臣淤，因?yàn)樗鼈兘鉀Q的問題不同。
.editorconfig 是一種跨編輯器的配置文件格式窃爷，用于定義代碼風(fēng)格邑蒋、縮進(jìn)、換行等基本格式規(guī)范按厘，是在編輯器級(jí)別上管理代碼風(fēng)格的工具医吊。
eslint 是一種 JavaScript 代碼靜態(tài)分析工具，用于檢測(cè)代碼中的潛在問題和錯(cuò)誤逮京，并推薦一些最佳實(shí)踐卿堂，以提高代碼質(zhì)量。
雖然它們有一些相似之處懒棉，但 .editorconfig 和 eslint 都是解決不同的問題草描，并可以一起使用。通常情況下策严，.editorconfig 中的一些格式規(guī)范可以與 eslint 中的規(guī)則進(jìn)行補(bǔ)充穗慕。
2、.editorconfig 和 Prettier 不會(huì)沖突妻导，它們可以共存逛绵。.editorconfig 用于定義項(xiàng)目中代碼格式的一些規(guī)則怀各，例如縮進(jìn)、tab 大小等术浪。而 Prettier 則是一個(gè)代碼格式化工具瓢对，它可以自動(dòng)將代碼格式化成符合規(guī)范的形式。
在使用 Prettier 的情況下胰苏，你可以在 .prettierrc (Prettier 配置文件) 中指定代碼格式化的規(guī)則硕蛹，然后在 .editorconfig 中定義項(xiàng)目中的其他代碼格式規(guī)則。這兩個(gè)工具可以一起使用碟联，以保持代碼風(fēng)格的一致性妓美。

問題

.editorconfig和prettier有規(guī)則沖突時(shí)如何處理

當(dāng).editorconfig和prettier之間出現(xiàn)規(guī)則沖突時(shí)，可以嘗試以下方法：
禁用.editorconfig中與prettier沖突的規(guī)則：在editorconfig文件中將與prettier沖突的規(guī)則注釋掉或刪除鲤孵，使editorconfig中的規(guī)則與prettier一致。
調(diào)整prettier配置：根據(jù).editorconfig文件中的規(guī)則調(diào)整prettier的配置辰如，以確保兩者的規(guī)則一致普监。
使用eslint作為代碼格式化工具：eslint可以與prettier配合使用，避免規(guī)則沖突的問題琉兜】可以在.eslintrc文件中設(shè)置代碼格式化相關(guān)的規(guī)則，然后通過eslint進(jìn)行代碼格式化豌蟋。
增加特定的prettier規(guī)則：可以在prettier配置中針對(duì).editorconfig中的規(guī)則增加特定的配置項(xiàng)廊散，以確保兩者的規(guī)則一致。例如梧疲，在prettier配置中增加tabWidth選項(xiàng)來匹配.editorconfig中的縮進(jìn)規(guī)則允睹。
總之，處理.editorconfig和prettier的規(guī)則沖突需要根據(jù)具體情況進(jìn)行調(diào)整幌氮，可以采取多種方法缭受，以達(dá)到使兩者規(guī)則一致的目的。