VSCodeで保存時に自動でLintされるようにする

はじめに

ゆとり世代の中野です。

今回チャレンジした内容は【VSCodeで保存時に自動でLintされるようにする】です。

さっそくチャレンジについて書いていきます。

チャレンジする背景

よく設定を忘れるので忘備録

チャレンジ内容

VSCodeで保存するタイミングで自動でLintされるようにします

やり方

VSCode

プラグインを入れる

Prettier - Code formatter - Visual Studio Marketplace

Extension for Visual Studio Code - Code formatter using prettier

marketplace.visualstudio.com

Prettier - Code formatter - Visual Studio Marketplace

VSCodeを再起動する

Project

必要なpackageをインストールする

npm install --save-dev eslint prettier eslint-config-prettier

eslintの設定ファイルを作成

npx eslint --init

各質問の解答は以下

.eslintrc.jsに prettier の設定を追加

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'standard',
    'prettier'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: [
    '@typescript-eslint'
  ],
  rules: {
  }
}

.vscode/settings.jsonに設定を追加

{
  // フォーマッターをPrettierにする
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // ファイル保存時にフォーマットを実行
  "editor.formatOnSave": true
}

まとめ

VSCodeにプラグインを入れて適用させる
Projectにpackage類をインストールする
各種設定ファイルを作成する

さいごに

新規Projectで最初にやっておきたい設定ですが忘れがちなので忘備録になります

yutanakano

WEBエンジニア

大阪生まれのゆとり世代です

趣味はバイクでツーリングに行くこと

愛車は Ninja ZX-25R SE KRT EDITION

Expoでプロダクトを作っています