ESLint

CRAで開発環境を設定しました.今回はESLintを見てから設定しましょうその他のVue.jsのESLintを参考にしている方はここで確認できますよ

1. ESLint

開発の過程でコーディングを行うと自分なりのスタイルが生まれますしかし、コラボレーションの過程で、これらのスタイルを統一する必要があります.そうすれば、相互理解とコラボレーションが容易になります.お手伝いするツールはESLintです.ESLintまたはLintと呼ばれています

1.1パッケージのインストール

npmコマンドを使用してプロジェクトを起動し、ESLintパッケージのインストールを試みます.開発依存パッケージとしてインストールされます.ご存じのように、Webブラウザで実行するときには不要な開発時にのみ必要なオプションです.

$ mkdir eslint-test
$ cd eslint-test
$ npm init -y
$ npm i eslint -D    // 패키지 설치

1.2パッケージの初期化

$ npx eslint --init

対応するコマンドを入力するとESLintが初期化されます.初期化結果は上記の画面を表示し、選択したオプションに基づいてconfigファイルを生成します.
シアンで表示されるオプションを既定値として選択します.

1.3 eslintrc.js

ここで、Vscodeを使用してプロジェクトを開き、インストールされている.eslintrc.jsファイルを開きます.ファイルには、rulesで自分またはチームのルールに従って設定できるオプションが記載されています.

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: "eslint:recommended",
  parserOptions: {
    ecmaVersion: 12,
  },
  rules: {
    semi: ["error", "always"],
  },
};

上記のsemiオプションは、文の後ろにセミコロンを付けないと、常にエラーとみなされることを意味します.ESLintのホームページには選択肢がたくさんありますので、参考にしてください.