最近のフォーマッター事情

2020-10-23

色々とややこしいフォーマッター周りですが、最近少しずつ理解できてきました。

なので、設定周りを備忘録がてら書いていこうと思います。

あくまで現時点での自分の環境ですので情報が正しいとは限りません、あしからず。

前提

  • Visual Studio Code

フォーマッター

ESLint

.ts 及び .tsx ファイルにフォーマットをかけます。

JavaScript の場合は .js、.jsx になります。

stylelint

.scss ファイルにフォーマットをかけます。

素の CSS の場合は .css になります。

markdownlint

.md ファイルにフォーマットをかけます。

Pretter

上記以外のファイルにフォーマットをかけます。

主に .json や .yml などです。

setting.json

{
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true,
    "source.fixAll.markdownlint": true
  },
  "editor.formatOnSave": true
}

挙動まで確認したので多分あっていると思います、違ったら申し訳ないです。

deprecated

CSScomb

アルファベット順にソートしたくて入れていたような気がします。

stylelint-orderで問題なく動くと思います、多分。

sort-imports

JS 及び TS ファイルの import 周りのソートを自動で行いたくて入れていました。

eslint-plugin-import を導入し、設定で問題なくソートされたのでおそらく不要です。

{
  "eslintConfig": {
    "extends": [
      "eslint:recommended",
      "plugin:import/errors",
      "plugin:import/warnings",
      "plugin:import/typescript"
    ],
    // よしなに
    "settings": {
      "import/resolver": {
        "node": {
          "paths": "src"
        }
      }
    },
    "rules": {
      "import/order": [
        "error",
        {
          "alphabetize": {
            "order": "asc",
            "caseInsensitive": true
          },
          "newlines-between": "always"
        }
      ]
    }
  }
}

フォーマッター周りは本当によくわからないですね…難しすぎる…。

この世にフォーマッター周りの仕様を全て把握している人なんて存在するんですかね？

最近のフォーマッター事情 - kk-web