DebianでESLintとPrettierとVS Codeの環境構築

Node.js v16とYarnのインストール

node -v
cd ~
curl -sL https://deb.nodesource.com/setup_16.x -o nodesource_setup.sh
sudo bash nodesource_setup.sh
sudo apt install nodejs
sudo npm install -g yarn
rm nodesource_setup.sh

ESLintのインストール

プロジェクトのディレクトリを作成しcd後、以下を実行

yarn add eslint
yarn add eslint-config-prettier
yarn add eslint-config-airbnb-base

.eslintrc.jsonの例

.eslintrc.json

{
  "env": {
    "node": true,
    "es2021": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": "latest",
  },
  "rules": {}
}

VSCodeに必要な拡張機能をインストール

• esbenp.prettier-vscode
• dbaeumer.vscode-eslint

VSCodeのsettings.jsonに以下を追記

私はとりあえずjsonとjsとtypescriptだけにprettierを適用させるようにしています。CommonJSなのにES6としてサジェストされてしまうことがあったのでVSCodeに標準で使われてるjavascriptのバリデーションは無効化しました。

settings.json

"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
"javascript.validate.enable": false