Plusieurs outils de formatage front-end à connaître en 2023 [Résumé]

Dans la grande ère du front-end, diverses chaînes d'outils front-end émergent constamment, notamment eslint, prettier, husky, commitlint etc. Parfois, c'est un problème ??? Quand il y a trop de choses, comment l'utiliser correctement est quelque chose que tout développeur front-end doit maîtriser. board???eslint, prettier, husky, commitlint 等, 东西太多有的时候也是trouble???,怎么正确的使用这个是每一个前端开发者都需要掌握的内容，请上车???

eslint

本次前端工程化的项目是基于react来的，vue用户也是同样的道理，只是有个别的依赖包不一样。

使用eslint的生态链来规范开发者对js/ts基本语法的规范。防止团队的成员乱写.

这里主要使用到的eslint的包有以下几个：

"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

接下来需要对eslint的规范写入配置文件中，可以在项目的根目录下面建立一个 .eslintrc.cjs

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的包
    }
  }

接下来在package.json 的 scripts 中加入一条命令

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

效果

代码中的不规范的格式就暴露出来了，现在可以来修复并且格式化代码。但是在格式化代码方面，prettier做的更好点，所以咱们来使用 prettier来进行代码格式化

prettier

prettier 是一款开源的代码格式化包，支持多种代码编写工具，常见的 vscode, webstorm 等，他都是支持的，那么怎么给他集成起来呢？

使用下面语句来安装依赖：

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为插件，才能一起使用

安装好依赖后，咱们还需要在 eslitrc.cjs中加入prettier的配置如下：

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

接下来在package.json中添加一段脚本

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

此时，咱们还需要配置哪些文件是不需要进行代码格式化的，所以在根目录下面建立 .prettierignore增加如下内容：

node_modules
package.json
pnpm-lock.yaml
dist

效果

修复成功，但是这里还报了一个警告，这个的解决办法如下：

在eslintrc.cjs的最后增加上一段配置如下：

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

配置自动格式化

每一次都需要在终端执行脚本，有点小复杂，能不能设置自动格式化呢？

答案是可以的

1. 打开设置

2. 输入fomatter,然后选中文本编译器后，选择prettier-Code formatter

3. 然后搜索 formate on save,选中即可

就可以出现下面的效果了：

按 ctrl + s 会自动的格式化代码哦???

husky

到上面为止，代码的格式化工具和代码规范检查就好了,这是本地的，所以咱们还需要在提交代码的时候，在commit 之前，进行 prettier 操作，就不需要手动啦。

使用脚本安装下面的依赖包

pnpm i husky -D

我们在终端通过 npx husky install 来初始化 husky

我们还需要生成pre-commit钩子的时候来执行npm run lint

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

安装完成后，会在 .husky 目录中新增一个文件 pre-commit

需要注意的是，我们需要在 package.json 注册 prepare 命令，在项目进行 pnpm i 之后就行 Huksy

eslint

Ce projet d'ingénierie front-end est basé sur React. La même chose est vraie pour les utilisateurs de vue, sauf que les packages de dépendances individuels. sont différents. 🎜

🎜Utilisez la chaîne écologique de eslint pour standardiser la syntaxe de base des développeurs de js/ts. Empêchez les membres de l'équipe d'écrire de manière aléatoire. 🎜🎜Les principaux packages eslint utilisés ici sont les suivants : 🎜

+ "prepare": "husky install"

🎜Utilisez les instructions suivantes pour suivre les dépendances : 🎜

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

🎜 Ensuite, vous devez écrire les spécifications eslint dans le fichier de configuration, vous pouvez Créez un .eslintrc.cjs dans le répertoire racine du projet🎜

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

🎜Puis ajoutez une commande aux scripts de package.json🎜

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

Effect< /h2>🎜🎜

🎜Le format irrégulier du code est exposé. Vous pouvez maintenant réparer et formater le code. Mais en termes de formatage du code, prettier fait un meilleur travail, alors utilisons prettier pour formater le code 🎜

prettier

🎜prettier est un package de formatage de code open source qui prend en charge une variété d'outils d'écriture de code, tels que vscode, Webstorm</code > et ainsi de suite sont tous supportés, alors comment les intégrer ? 🎜🎜Utilisez l'instruction suivante pour installer les dépendances : 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>npx husky add .husky/commit-msg &amp;#39;npx --no-install commitlint --edit &quot;&quot;&amp;#39;</pre><div class="contentsignin">Copier après la connexion</div></div>🎜 Laissez-moi vous expliquer ci-dessous à quoi servent ces packages, sinon vous les installerez en vain 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>pnpm i lint-staged -D</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div>🎜Après avoir installé les dépendances, nous devons encore installer <code>eslitrc. cjs</ La configuration pour ajouter plus joli dans le code> est la suivante : 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>+ &quot;lint-staged&quot;: { + &quot;**/*.{js,jsx,tsx,ts}&quot;: [ + &quot;eslint --fix&quot; + ] + }</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div>🎜 Ensuite, ajoutez un script dans <code>package.json 🎜

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

- npm run lint
+ npx --no -- lint-staged

🎜À ce stade, nous devons également configurer quels fichiers ne sont pas doit être formaté en code. Créez donc .prettierignore sous le répertoire racine et ajoutez le contenu suivant : 🎜rrreee

Effect

🎜🎜🎜La réparation a réussi, mais un avertissement a été signalé ici. Comment résoudre ce problème La méthode est la suivante : 🎜🎜Ajoutez la configuration précédente à la fin de eslintrc.cjs comme suit : 🎜rrreee🎜🎜

Configurer le formatage automatique

🎜Vous devez vous connecter au terminal à chaque fois. L'exécution du script est un peu compliquée. Puis-je configurer le formatage automatique ? 🎜

🎜La réponse est oui🎜

1. Ouvrir les paramètres

🎜🎜

2. Entrez fomatter et sélectionnez Après Compilateur de texte, sélectionnez plus joli formateur de code

🎜🎜

3. Recherchez ensuite formater lors de l'enregistrement</ code >, sélectionnez-le</li></ol>🎜<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/068/8774ad4dc4d45947c4632a833ddbe20a-5.png" class="lazy" alt="image .png " chargement="lazy"/>🎜🎜L'effet suivant apparaîtra : 🎜🎜<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/068/f1a8020cfb0b9dfc064fc05923d21880-9.png" class="lazy" alt ="first-3trois3-17.gif" chargement="lazy"/>🎜<blockquote>🎜Appuyez sur <code>ctrl + s et le code sera automatiquement formaté ???🎜

   husky

   🎜Jusqu'à présent, l'outil de formatage du code et la vérification des spécifications du code fonctionnent très bien. C'est local, nous devons donc toujours soumettre le code. Lorsque vous effectuez des opérations plus jolies avant de valider, il n'est pas nécessaire de le faire manuellement. 🎜🎜Utilisez le script pour installer les packages de dépendances suivants🎜rrreee🎜Nous initialisons husky dans le terminal via npx husky install🎜🎜🎜🎜Nous devons également générer le pre-commit< /code> hook Lors de l'exécution de <code>npm run lint🎜rrreee🎜Une fois l'installation terminée, un nouveau fichier pre-commit🎜🎜🎜🎜Il convient de noter que nous devons >package.json< /code> Enregistrez la commande prepare. Une fois le projet pnpm i, installez Huksy.

   + "prepare": "husky install"

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

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

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

   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 主包

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

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

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

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

   在终端执行下面的命令

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

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

   

   效果

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

   

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

   lint-staged

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

   使用下面命令安装依赖

   pnpm i lint-staged -D

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

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

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

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

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

   如此就大功告成啦???

   

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

   Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!