0から1までのwebpack+React + TSプロジェクトをビルドします（6）

序文

前の章：ミニマリストのwebpack + Reactプロジェクトを最初から作成する（5）

いくつか投げた後、作者は単にwebpack + react+TSプロジェクトを構築しました;今度はコードスタイルを定義します。結局のところ、チームワーク、優れたコードスタイルは、チームが効率を向上させるのに役立ちます。

eslintをインストールします

eslintをグローバルにインストールする

npm i eslint -g
复制代码

構成ファイルの初期化

eslint --init
复制代码

How would you like to use ESLint?

• 構文のみを確認するには
• 構文をチェックして問題を見つけるには
• To check syntax, find problems, and enforce code style

What type of modules does your project use?

• JavaScript modules (import/export)
• CommonJS（必須/エクスポート）
• どれでもない

Which framework does your project use?

• React
• Vue.js
• どれでもない

Does your project use TypeScript?

• Yes
• 番号

Where does your code run?

• Browser
• Node

How would you like to define a style for your project?

• Use a popular style guide
• あなたのスタイルについての質問に答える

Which style guide do you want to follow?

• Airbnb: https://github.com/airbnb/javascript
• 標準：github.com/standard/st…
• Google：github.com/google/esli…
• XO：github.com/xojs/eslint…

What format do you want your config file to be in?

• JavaScript
• YAML
• JSON

eslintがインストールされるのを待っています

Would you like to install them now with npm?

• Yes
• 番号

eslintのインストールが完了したことを確認したら、しばらくお待ちください

Successfully created .eslintrc.js file in

デフォルトのeslint構成

eslintルートディレクトリをインストールすると、ファイル.eslintrc.jsが生成されます

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['plugin:react/recommended', 'airbnb'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {
      // 这里写一些eslint规则
  },
};
复制代码

安装@types/ react @ types / react-dom

npm i @types/react @types/react-dom -D
复制代码

コードを自動的にフォーマットする

新しい.vscode/settings.json

{
  "prettier.semi": true,
  "prettier.singleQuote": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

复制代码

vscodeエディタープラグイン

• Prettier-コードフォーマッター
• ESLint

vscode用のこれら2つのプラグインは、コード編集中にコードをフォーマットするのに役立ちます