vscode統合prettier、eslint

紹介

前提条件

プロセス

prettier

をインストール

が作成する.eslintrc.js構成は以下の

が作成する.prettierrcファイル、構成は以下の

コミット時チェック

プラグイン

をインストール

構成

vscode保存自動フォーマット

紹介する

最近reactを勉強して、create-react-appを通じてプロジェクトを作成して、プロジェクトの中でeslintだけを統合して、prettierを統合していないことを発見して、1回の模索と資料を調べることを通じて、統合は成功しました.必要に応じてプロセスを記録します.

前提条件

エディタvscodeは、eslintおよびprettierプラグイン

がインストールされている.

creat-react-appを使用してプロジェクト

を作成

プロセス

prettierのインストール

yarn add eslint-plugin-prettie -dev
yarn add eslint-config-prettier -dev
yarn add prettier -dev

作成.eslintrc.jsは以下のように構成されている

module.exports={
  "extends": ["react-app"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
} 

作成.prettierrcファイル、次のように構成されています。

{
  "singleQuote": false,
  "semi": true
}

ここでは2つのキューだけを構成し、単一引用符を使用して末尾にセミコロンを付け、他のルールは自分で関連資料を調べます.

コミット時チェック

プラグインのインストール

yarn add lint-staged husky -dev

コンフィギュレーション

//package.json    
{
	"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged":{
	"src/*.{js,jsx,mjs,ts,tsx}": [
      "node_modules/.bin/prettier --write",
      "node_modules/.bin/eslint --fix",
      "git add"
    ],
    "src/*.{css,scss,less,json,html,md,markdown}": [
      "node_modules/.bin/prettier --write",
      "git add"
    ]
}
}

vscode保存自動フォーマット

設定setting.jsonは以下の通り

{
"editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}