ESLintの基本

今までなんとなく使っていたので、ちょっと調べてみた。

■ESLint・・・構文の間違いやルールに沿ってコードが記述されているかをチェックするツール
■Prettier・・・コードの整形をするフォーマッター

ESLint設定ファイル

ESLintではルールを.eslintrc.jsファイルのrulesに書く。

.eslintrc.js

module.exports = {
  省略
  rules: {
    “@typescript-eslint/no-unused-vars”: “off”,
    “no-unused-vars”: “off”,
　　　　　　　“quotes”: [1, 'single'],
  　　　“semi”: ['error', 'always'],
    indent: [“error”, 2],
  },
};

ルールはここに載ってる・・・https://eslint.org/docs/latest/rules/
vueに関してはここ（https://eslint.vuejs.org/rules/）
エラーレベル・・・off、warn、error

Prettier設定ファイル

ESLintでもフォーマットできるのになぜPrettierを使うのかよくわかりませんが・・
いろいろできるのかな

.prettierrc

  "tabWidth": 4,
  "semi": false,
  "singleQuote": true

---

.eslintrc.jsファイルのrulesにprettierの設定も書けるみたい。

module.exports = {
  省略
  rules: {
    “@typescript-eslint/no-unused-vars”: “off”,
    “no-unused-vars”: “off”,
    "prettier/prettier": [
      "error",
      {
        tabWidth: 2,
        singleQuote: false,
        semi: true,
      },
    ],
  },
};