Several front-end formatting tools worth knowing in 2023 [Summary]

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",  // 这个是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语法

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,   // 标志当前的环境，不然使用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的包
    }
  }

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 规范 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当中，使用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的错误
    }
}

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<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">npx husky add .husky/pre-commit &quot;npm run lint&quot; // 这句话的意思是说，在commit之前先执行 npm run lint脚本</pre><div class="contentsignin">Copy after login</div></div>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:<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">+ &quot;prepare&quot;: &quot;husky install&quot;</pre><div class="contentsignin">Copy after login</div></div><blockquote><p>上面咱们是自己手动 <code>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前端入门）

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!