"eslint": "^8.33.0",  // 这个是eslint的主包
"eslint-plugin-react": "^7.32.2",  // 这是react基于eslint来做的语法规范插件
"eslint-plugin-react-hooks": "^4.6.0", // 这是 react-hooks 语法基于eslint做的插件
"@typescript-eslint/eslint-plugin": "^5.50.0",  // typescript 基于eslint来做的插件
"@typescript-eslint/parser": "^5.50.0",  // typescript 基于eslint做的语法解析器，使得eslint可以约束ts语法

pnpm i eslint eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

module.exports = {
    'env': {
        'node': true,   // 标志当前的环境，不然使用module.exports 会报错
        'es2021': true
    },
    extends: [
      'eslint:recommended',  // 使用eslint推荐的语法规范
      'plugin:react/recommended',  // react推荐的语法规范
      'plugin:@typescript-eslint/recommended' // ts推荐的语法规范
    ],
    parser: '@typescript-eslint/parser',  // 使用解析器来解析ts的代码，使得eslint可以规范ts的代码
    parserOptions: {
      ecmaFeatures: {
        jsx: true  // 允许使用jsx的语法
      },
      ecmaVersion: 'latest',  // es的版本为最新版本
      sourceType: 'module'  // 代码的模块化方式，使用module的模块方式
    },
    plugins: ['react', '@typescript-eslint', 'react-hooks'],  // 使用对应的react, react-hooks, @typescript-eslint 等插件
    rules: {
      quotes: ['error', 'single'],  // 配置单引号的规则，如果不是单引号，报错
      semi: 'off',  //  不需要使用分号；
      'react/react-in-jsx-scope': 'off'  // 在jsx中不需要导入 react的包
    }
  }

"lint": "eslint --ext .ts,.tsx,.js,.jsx ./" // 使用eslint 规范 ts,tsx,js,jsx的代码

pnpm i prettier eslint-plugin-prettier eslint-config-prettier

"prettier": "^2.8.3",  // prettier 主包
"eslint-config-prettier": "^8.6.0",  // eslint 和prettier的共同配置
"eslint-plugin-prettier": "^4.2.1",  // 在eslint当中，使用prettier为插件，才能一起使用

{
 extends:[
 ...,
+ 'prettier', // prettier
+ 'plugin:prettier/recommended' // prettier推荐的配置  
 ],
+ plugins:[...,'prettier'],
rules: {
+    'prettier/prettier': 'error', // eslint 和prettier 用prettier的错误
    }
}

+ "prettier": "eslint --fix --ext .ts,.tsx,.js,.jsx --quiet ./"

node_modules
package.json
pnpm-lock.yaml
dist

+ settings: {
+    react: {
+      version: 'detect'
+    }
+  }

pnpm i husky -D

npx husky add .husky/pre-commit "npm run lint"  // 这句话的意思是说，在commit之前先执行 npm run lint脚本

+ "prepare": "husky install"

pnpm i commitlint @commitlint/cli @commitlint/config-conventional -D

 "@commitlint/cli": "^17.4.2", // 规范提交信息
 "@commitlint/config-conventional": "^17.4.2",  // commitlint 常用的msg配置
 "commitlint": "^17.4.2" // commitlint 主包

module.exports = {
  extends: ['@commitlint/config-conventional']
}

Effect

Automatische Formatierung konfigurieren

🎜Die Antwort ist ja🎜

1. Einstellungen öffnen

2. Geben Sie formater ein und wählen Sie Nachher Text Compiler, wählen Sie prettier-Code formatter

3. Dann suchen Sie nach dem Code formate on save</ >, wähle es aus</li></ol>🎜<img src="https://img.php.cn/upload/article/000/000/068/8774ad4dc4d45947c4632a833ddbe20a-5.png" alt="image .png " Loading="lazy"/>🎜🎜Der folgende Effekt wird angezeigt: 🎜🎜<img src="https://img.php.cn/upload/article/000/000/068/c6b92888e0f470c07c551c79e9fdb0e8-6 .gif" alt ="first-3drei3-17.gif" wird geladen="lazy"/>🎜<blockquote>🎜Drücken Sie <code>Strg + s und der Code wird automatisch formatiert???🎜

   husky

   🎜Bisher sind das Codeformatierungstool und die Codespezifikationsprüfung völlig in Ordnung. Dies ist lokal, daher müssen wir den Code noch senden, wenn wir schönere Vorgänge ausführen, bevor wir ihn festschreiben. Es besteht keine Notwendigkeit, dies manuell zu tun. 🎜🎜Verwenden Sie das Skript, um die folgenden Abhängigkeitspakete zu installieren🎜rrreee🎜Wir initialisieren husky im Terminal über npx husky install🎜🎜🎜🎜Wir müssen auch den pre-commit< generieren /code> Hook Beim Ausführen von <code>npm run lint🎜rrreee🎜Nach Abschluss der Installation wird eine neue Datei pre-commit🎜🎜🎜🎜Es sollte beachtet werden, dass wir >package.json< benötigen /code> Registrieren Sie den Befehl prepare, nachdem das Projekt pnpm i ist. Der Befehl lautet wie folgt: 🎜

   + "prepare": "husky install"

   Nach dem Login kopieren

   Nach dem Login kopieren

   上面咱们是自己手动 npx husky install的，我们需要让后面使用咱们配置的人自动来初始化 husky

   但是大家如果再深入一步，就会想到???。既然我内容都管控好了，是不是需要把 commit -m 'xxx' 中的msg 也管控下呀???

   使用下面的命令来安装包：

   pnpm i commitlint @commitlint/cli @commitlint/config-conventional -D

   Nach dem Login kopieren

   Nach dem Login kopieren

   包意思解析

    "@commitlint/cli": "^17.4.2", // 规范提交信息
    "@commitlint/config-conventional": "^17.4.2",  // commitlint 常用的msg配置
    "commitlint": "^17.4.2" // commitlint 主包

   Nach dem Login kopieren

   Nach dem Login kopieren

   安装好这些包后，需要在根目录添加一个 .commitlintrc.cjs来配置咱们的commitlint的配置:

   module.exports = {
     extends: ['@commitlint/config-conventional']
   }

   Nach dem Login kopieren

   Nach dem Login kopieren

   有了这些配置，commit是否生效呢？

   答案是 no, 还需要在git hooks中添加一个方法

   在终端执行下面的命令

   npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

   Nach dem Login kopieren

   然后会在.husky中生成一个新的文件commit-msg

   

   效果

   接下来就是见证奇迹的时刻???

   

   对于乱写commit 信息就过不了哦???

   lint-staged

   对于细心的同学可能会发现，我们每一次提交都会 prettier整个目录的所有问题，大大的降低了咱们编码的速度。所以咱们还需要做一件事情，那就是 只格式化需要提交的代码，其他的就不需要格式化了

   使用下面命令安装依赖

   pnpm i lint-staged -D

   Nach dem Login kopieren

   Nach dem Login kopieren

   然后在package.json中新增如下内容

   + "lint-staged": {
   +     "**/*.{js,jsx,tsx,ts}": [  
   +          "eslint --fix"
   +       ]
   +    }

   Nach dem Login kopieren

   Nach dem Login kopieren

   上面那段脚本的意思是 只对 .js,.jsx, .ts,.tsx 后缀文件进行eslint的修复，其他的就不进行格式化和修复了

   有了这个，还需要对 pre-commit 这个钩子就行修改内容

   #!/usr/bin/env sh
   . "$(dirname -- "$0")/_/husky.sh"
   
   - npm run lint
   + npx --no -- lint-staged

   Nach dem Login kopieren

   如此就大功告成啦???

   

   （学习视频分享：web前端入门）

   Das obige ist der detaillierte Inhalt vonMehrere wissenswerte Frontend-Formatierungstools im Jahr 2023 [Zusammenfassung]. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!