開発覚書はてな版

個人的な開発関連の備忘録

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

概要

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

marketplace.visualstudio.com

github.com

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

kakkoyakakko2.hatenablog.com

実行環境

使用ライブラリ

  • 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
}

.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
  }
}

実行結果

f:id:kakkoya:20191209164108g:plain

サンプルソース一式

github.com

Visual Studio Code の設定共有まわりの記事

kakkoyakakko2.hatenablog.com

kakkoyakakko2.hatenablog.com