【VSCode】ESLintを使用してコードを自動フォーマットする

概要

Visual Studio Code の TSLint拡張機能と eslint-plugin-prettier を使用してソースコードを自動フォーマットすることが出来ます。各種設定や使用ライブラリ等を記載します。

marketplace.visualstudio.com

github.com

TSLintの自動フォーマットについては以下の記事を参考にしてください。

kakkoyakakko2.hatenablog.com

実行環境

Node.js - 10.x
Yarn - 1.17.x
Visual Studio Code - 1.40.x
- ESLint - 1.9.x

使用ライブラリ

eslint - 6.7.x
prettier - 1.19.x
eslint-config-prettier - 6.7.x
eslint-plugin-prettier - 3.1.x

設定

ライブラリのインストール

以下のライブラリをインストールする。

yarn add -D eslint
yarn add -D prettier 
yarn add -D eslint-plugin-prettier
yarn add -D eslint-config-prettier

settings.json の設定

以下の設定を ./.vscode/settings.json に記述する。

{
  "eslint.autoFixOnSave": true
}

※ESLint拡張機能が2.1以降の場合（2020/5/31追記）

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

.eslintrc.json の設定

以下の設定を .eslintrc.json に記述する。

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "printWidth": 140,
        "tabWidth": 2,
        "useTabs": false,
        "semi": true,
        "singleQuote": true,
        "trailingComma": "all",
        "bracketSpacing": true,
        "arrowParens": "always"
      }
    ]
  },
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 2015
  }
}