Vue,TypeScriptのリンターおよびフォーマッターを導入する

リンターの導入

１．ESLint のインストール

npm install --save-dev eslint

２．npx eslint --initコマンドで、対話的に ESLint 構成を作成する

npx eslint --init

コマンドを実行し、ESLint の構成ファイルを作成する。
今回は以下の構成で作業を進めていく。

How would you like to use ESLint?はTo check syntax, find problems, and enforce code styleを選択。
What type of modules does your project use?はJavaScript modules (import/export) を選択。
Which framework does your project use?はNone of theseを選択。
Does your project use TypeScript?はYesを選択。
Where does your code run?はBrowserとNodeを選択。
How would you like to define a style for your project?はUse a popular style guideを選択。
Which style guide do you want to follow?はStandardを選択。
What format do you want your config file to be in?はJavaScriptを選択。
Would you like to install them now with npm?はYesを選択し、必要なモジュールをインストール。

.eslintrc.jsが作成されたことを確認する

フォーマッターの導入

１．Prettier をインストール

npm install --save-dev prettier eslint-config-prettier

バージョン整合性エラーを履く場合は、バージョンを下げるなどして入れ直してください。
eslint-config-prettierは、ESLintのフォーマッターを無効化し、リンタのみを有効にするもの

２．.eslintrc.jsに Prettier の項目を追加する

.eslintrc.js

module.exports = {
  /* 中略 */
  extends: [
    /* 中略 */
    "prettier", // 追加。他の設定の上書きを行うために、必ず最後に配置する。
  ],
};

実行スクリプトを準備する

package.jsonのscriptに実行コマンドを追加する。
以下はsrc配下の.tsと.vueのファイルに対して実行する。

package.json

/* 中略 */
"scripts": {
 /* 中略 */
    "lint": "vue-cli-service lint &&prettier --write \"src/**/*{.ts,.vue}\" "
  },

実行する

npm run lint

以上