Visual Studio CodeにESLintプラグインをインストールする方法(Prettier連携) – Angular

Visual Studio CodeにESLintプラグインをインストールする方法(Prettier連携) – Angular

プラグイン

VSCodeにESLintプラグインをインストールします。

依存関係インストール

$ npm i --save-dev prettier eslint-config-prettier eslint-plugin-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser

.eslintjson

.eslintjsonを作成します。

$ npx eslint --init
You can also run this command directly using 'npm init @eslint/config'.
√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · none
√ Which framework does your project use? · none
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ What format do you want your config file to be in? · JSON
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
√ Would you like to install them now? · No / Yes
Successfully created .eslintrc.json file in XXX

作成されたファイルにルールを記述していきます。”plugins”に”prettier”を追加します。

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "overrides": [
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest"
    },
    "plugins": [
        "@typescript-eslint",
        "prettier" ★追加
    ],
    "rules": {
        "prettier/prettier": [
            "error",
            {
                "printWidth": 80,
                "tabWidth": 2,
                "singleQuote": true,
                "semi": false,
                "trailingComma": "none",
                "bracketSpacing": true,
                "arrowParens": "avoid",
                "endOfLine": "auto"
            }
        ],
        "indent": ["error", 2, {"SwitchCase": 1}],
        "quotes": ["error", "single"],
        "semi": ["error", "never"],
        "block-spacing": "error",
        "eol-last": ["error", "always"],
        "no-var": "error",
        "no-unused-vars": "off",
        "no-undef":"off",
        "max-params": ["error", 3],
        "eqeqeq": ["error", "always"],
        "yoda": "error",
        "no-shadow": "error",
        "no-dupe-args": "error",
        "no-unreachable": "error"
    }
}

settings.json

./vscode/settings.jsonファイルを作成し、中身を以下の通りにします。

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

これで保存時に自動で整形されるようになります。

.eslintignore

このファイルを作成して、対象外のソースを記述することができます。

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^