Zenn
Closed1

VSCode + Prettier + Eslint

やっぷやっぷ

VSCodeの拡張機能を入れる

VSCodeのsettings.jsonに追加

"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",

prettierとeslintをインストール

npm install --save-dev prettier prettier-eslint prettier-eslint-cli standard

package.jsonにscripts追加

'**/*.{js,json,md,html}'はプロジェクトに応じて変更する
globパターンを用いてディレクトリを渡すことができる

{
  "scripts": {
    "format": "prettier-eslint --write '**/*.{html,css,scss,js}' && standard --fix"
  },
  "prettier": {
    "semi": false,
    "singleQuote": true,
    "bracketSameLine": true,
  },
  "devDependencies": {
    "prettier": "*",
    "prettier-eslint": "*",
    "prettier-eslint-cli": "*",
    "standard": "*"
  }
}

prettierとeslintを実行する

npm run format

参考

Prettierの導入方法 - フロントエンド開発で必須のコード整形ツール
JavaScript Standard Style

このスクラップは2023/03/29にクローズされました