Zenn
📌

lint, prettier設定

2023/02/12に公開
Next.js
Nuxt
ESLint
Prettier
tech

prettier

prettierrc.json
{
  "semi": false,
  "singleQuote": true,
  "printWidth": 80
}

lint

# prettierとの競合回避
# https://prettier.io/docs/en/integrating-with-linters.html
yarn add --dev eslint-config-prettier

# 未使用のimport文削除
# https://www.npmjs.com/package/eslint-plugin-unused-imports
yarn add --dev eslint-plugin-unused-imports

# importの順番決め
# https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/order.md#pathgroups-array-of-objects
yarn add --dev eslint-plugin-import

全体

.eslintrc.js
module.exports = {
  plugins: ["import", "unused-imports"],
  extends: ["next/core-web-vitals", "prettier"],
  rules: {
    // 未使用import文削除
    "no-unused-vars": "off",
    "unused-imports/no-unused-imports": "error",
    "unused-imports/no-unused-vars": [
      "warn",
      {
        vars: "all",
        varsIgnorePattern: "^_",
        args: "after-used",
        argsIgnorePattern: "^_",
      },
    ],

    // import文の順序を整理
    "import/order": [
      "warn",
      {
        groups: [
          "builtin",
          "external",
          "internal",
          "parent",
          "sibling",
          "index",
          "object",
          "type",
        ],
        "newlines-between": "always",
        pathGroupsExcludedImportTypes: ["builtin"],
        alphabetize: { order: "asc", caseInsensitive: true },
      },
    ],
  },
};

参考

Discussion