2023 年に知っておく価値のあるいくつかのフロントエンド書式設定ツール [概要]

大規模なフロントエンド時代では、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 のスクリプトにコマンドを追加します。

"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 に追加する必要があります。

{
 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

を作成し、次の内容を追加します: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>node_modules package.json pnpm-lock.yaml dist</pre><div class="contentsignin">ログイン後にコピー</div></div>Effect

修復は成功しましたが、ここで警告が報告されました。解決策は次のとおりです:

前の構成を

eslintrc の最後に追加します。 cjs

は次のようになります。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>+ settings: { + react: { + version: &amp;#39;detect&amp;#39; + } + }</pre><div class="contentsignin">ログイン後にコピー</div></div>

自動フォーマットの設定

ターミナルでスクリプトを実行する必要があるたびに、少し複雑になります。自動フォーマットを設定できますか?

#答えは「はい」です

設定を開く

Enter

fomatter

を選択し、
2. Text Compiler を選択し、prettier-Code formatter

##その後formate on save

を検索し、それを選択します

すると、次の効果が表示されます:

Press ctrl s

will自動的にコードをフォーマットします???

husky

上記までは、コードフォーマットツールとコードを使用するだけです仕様チェックこれらはローカルであるため、コードを送信するときにコミットする前に、よりきれいな操作を実行する必要があるため、手動で行う必要はありません。

スクリプトを使用して次の依存関係パッケージをインストールします

pnpm i husky -D

npx husky install# を通じてターミナルで

husky

## を初期化しますまた、

npm run lint

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

を実行するための

pre-commit フックを生成する必要もあります。インストールが完了したら、 .husky ディレクトリにあります。 pre-commit

に新しいファイルを追加します。# に

を登録する必要があることに注意してください。 ##package.json

prepare コマンドを実行すると、プロジェクトが

pnpm i

になった後、Huksy をインストールできます。コマンドは次のとおりです:<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>+ &quot;prepare&quot;: &quot;husky install&quot;</pre><div class="contentsignin">ログイン後にコピー</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前端入门）

以上が2023 年に知っておく価値のあるいくつかのフロントエンド書式設定ツール [概要]の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。