In the big front-end era, various front-end tool chains are constantly emerging, including eslint, prettier, husky, commitlint etc. Sometimes it’s trouble??? when there are too many things. How to use this correctly is something every front-end developer needs to master. Please get on board? ??

eslint

This front-end engineering project is based on react. The same is true for vue users, except that individual dependency packages are different.

Use the ecological chain of eslint to standardize developers’ specifications for the basic syntax of js/ts. Prevent team members from writing randomly.

The main eslint packages used here are the following:

"eslint": "^8.33.0",  // 這個(gè)是eslint的主包
"eslint-plugin-react": "^7.32.2",  // 這是react基于eslint來(lái)做的語(yǔ)法規(guī)范插件
"eslint-plugin-react-hooks": "^4.6.0", // 這是 react-hooks 語(yǔ)法基于eslint做的插件
"@typescript-eslint/eslint-plugin": "^5.50.0",  // typescript 基于eslint來(lái)做的插件
"@typescript-eslint/parser": "^5.50.0",  // typescript 基于eslint做的語(yǔ)法解析器，使得eslint可以約束ts語(yǔ)法

Use the following statements to follow the dependencies:

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

Next You need to write the eslint specifications into the configuration file. You can create a .eslintrc.cjs

module.exports = {
    'env': {
        'node': true,   // 標(biāo)志當(dāng)前的環(huán)境，不然使用module.exports 會(huì)報(bào)錯(cuò)
        'es2021': true
    },
    extends: [
      'eslint:recommended',  // 使用eslint推薦的語(yǔ)法規(guī)范
      'plugin:react/recommended',  // react推薦的語(yǔ)法規(guī)范
      'plugin:@typescript-eslint/recommended' // ts推薦的語(yǔ)法規(guī)范
    ],
    parser: '@typescript-eslint/parser',  // 使用解析器來(lái)解析ts的代碼，使得eslint可以規(guī)范ts的代碼
    parserOptions: {
      ecmaFeatures: {
        jsx: true  // 允許使用jsx的語(yǔ)法
      },
      ecmaVersion: 'latest',  // es的版本為最新版本
      sourceType: 'module'  // 代碼的模塊化方式，使用module的模塊方式
    },
    plugins: ['react', '@typescript-eslint', 'react-hooks'],  // 使用對(duì)應(yīng)的react, react-hooks, @typescript-eslint 等插件
    rules: {
      quotes: ['error', 'single'],  // 配置單引號(hào)的規(guī)則，如果不是單引號(hào)，報(bào)錯(cuò)
      semi: 'off',  //  不需要使用分號(hào)；
      'react/react-in-jsx-scope': 'off'  // 在jsx中不需要導(dǎo)入 react的包
    }
  }

in the root directory of the project. Next, add a command to the scripts of package.json

"lint": "eslint --ext .ts,.tsx,.js,.jsx ./" // 使用eslint 規(guī)范 ts,tsx,js,jsx的代碼

Effect

The non-standard format in the code is exposed. Now you can repair and format the code. But in terms of formatting code, prettier does a better job, so let’s use prettier to format the code

prettier

prettier is an open source code formatting package that supports a variety of code writing tools, including common vscode, webstorm, etc., it all supports , so how to integrate it?

Use the following statement to install dependencies:

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

Let me explain below what these packages are used for, otherwise you will install them by mistake

"prettier": "^2.8.3",  // prettier 主包
"eslint-config-prettier": "^8.6.0",  // eslint 和prettier的共同配置
"eslint-plugin-prettier": "^4.2.1",  // 在eslint當(dāng)中，使用prettier為插件，才能一起使用

After installing the dependencies, We also need to add the prettier configuration to eslitrc.cjs as follows:

{
 extends:[
 ...,
+ 'prettier', // prettier
+ 'plugin:prettier/recommended' // prettier推薦的配置  
 ],
+ plugins:[...,'prettier'],
rules: {
+    'prettier/prettier': 'error', // eslint 和prettier 用prettier的錯(cuò)誤
    }
}

Next, add a script to package.json

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

At this time, we also need to configure which files do not need to be code formatted, so create .prettierignore under the root directory and add the following content:

node_modules
package.json
pnpm-lock.yaml
dist

Effect

The repair was successful, but a warning was reported here. The solution is as follows:

Add the previous configuration at the end of eslintrc.cjs as follows:

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

Configuring automatic formatting

Every time I need to execute the script in the terminal, it is a bit complicated. Can I set automatic formatting?

The answer is yes

1. Open settings

2. Enterfomatter, then select Text Compiler, select prettier-Code formatter

##Then search
3. formate on save, select it

and the following effect will appear:

Press

ctrl s will automatically format the code???

husky

Until the above, Just use code formatting tools and code specification checks. These are local, so we still need to perform prettier operations before committing when submitting the code, so there is no need to do it manually.

Use the script to install the following dependency packages

pnpm i husky -D

We initialize

husky## in the terminal through npx husky install

#We also need to generate the

pre-commit

hook to execute npm run lint<pre class='brush:php;toolbar:false;'>npx husky add .husky/pre-commit &quot;npm run lint&quot; // 這句話(huà)的意思是說(shuō)，在commit之前先執(zhí)行 npm run lint腳本</pre>After the installation is completed, it will be in the .husky directory Add a new file in

pre-commit

It should be noted that we need to register

in

package.json prepare command, after the project is pnpm i, Huksy can be installed. The command is as follows:<pre class='brush:php;toolbar:false;'>+ &quot;prepare&quot;: &quot;husky install&quot;</pre><blockquote><p>上面咱們是自己手動(dòng) <code>npx husky install的，我們需要讓后面使用咱們配置的人自動(dòng)來(lái)初始化 husky

但是大家如果再深入一步，就會(huì)想到???。既然我內(nèi)容都管控好了，是不是需要把 commit -m 'xxx' 中的msg 也管控下呀???

使用下面的命令來(lái)安裝包：

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

包意思解析

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

安裝好這些包后，需要在根目錄添加一個(gè) .commitlintrc.cjs來(lái)配置咱們的commitlint的配置:

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

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

答案是 no, 還需要在git hooks中添加一個(gè)方法

在終端執(zhí)行下面的命令

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

然后會(huì)在.husky中生成一個(gè)新的文件commit-msg

效果

接下來(lái)就是見(jiàn)證奇跡的時(shí)刻???

對(duì)于亂寫(xiě)commit 信息就過(guò)不了哦???

lint-staged

對(duì)于細(xì)心的同學(xué)可能會(huì)發(fā)現(xiàn)，我們每一次提交都會(huì) prettier整個(gè)目錄的所有問(wèn)題，大大的降低了咱們編碼的速度。所以咱們還需要做一件事情，那就是 只格式化需要提交的代碼，其他的就不需要格式化了

使用下面命令安裝依賴(lài)

pnpm i lint-staged -D

然后在package.json中新增如下內(nèi)容

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

上面那段腳本的意思是 只對(duì) .js,.jsx, .ts,.tsx 后綴文件進(jìn)行eslint的修復(fù)，其他的就不進(jìn)行格式化和修復(fù)了

有了這個(gè)，還需要對(duì) pre-commit 這個(gè)鉤子就行修改內(nèi)容

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

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

如此就大功告成啦???

（學(xué)習(xí)視頻分享：web前端入門(mén)）

The above is the detailed content of Several front-end formatting tools worth knowing in 2023 [Summary]. For more information, please follow other related articles on the PHP Chinese website!