【ESlint,prettier】Vue+javascript

vueとjavascript環境でESlintをかける機会があったので記録として残しておきます。

今回はフォーマッタとしてprettierを使用します。

prettierのインストール＆設定

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

prettier.config.js

module.exports = {
    printWidth: 120, // 折り返す行の長さ
    tabWidth: 4, // タブサイズ
    singleQuote: true, // シングルクォートに置き換え
    jsxSingleQuote: true, // シングルクォートに置き換え(JSX)
    singleAttributePerLine: true, // JSXの属性ごとに改行する
    semi: false, // 行末のセミコロンを削除
    endOfLine: 'lf', // 改行コードを指定
}

ESlintのインストール＆設定

npm install --save-dev eslint

npm install --save vue-eslint-parser eslint-config-prettier eslint-plugin-prettier

今回の環境はeslint v8.49.0で行っています。
v9以降ではeslintrcファイルは非推奨となるようです。
実際、v9をインストールして以下のファイルは使用できませんでした。

設定の内容はpretteirを使う設定と、vueのparserを入れています。

.eslintrc.cjs

module.exports = {
    extends: ['eslint:recommended', 'plugin:prettier/recommended'],
    plugins: ['prettier'],
    parserOptions: {
        ecmaFeatures: {
            jsx: true,
        },
        ecmaVersion: 13,
        sourceType: 'module',
    },
    parser: 'vue-eslint-parser',
    env: {
        browser: true,
        node: true,
        es2022: true,
    },
    globals: { process: true },
    rules: {
        'no-debugger': 'warn',
        'no-unused-vars': 'warn',
    },
}

package.jsonの設定

ルートディレクトリで実施するようにしています。
scriptのlintでbackendとfrontend/srcに対して実施しています。

package.json

{
    "name": "example",
    "version": "1.0.0",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "lint": "eslint --fix backend/**/*.{js,cjs} && eslint --fix frontend/src/**/*.{js,vue}"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "eslint": "^8.49.0",
        "eslint-config-prettier": "^9.1.0",
        "eslint-plugin-prettier": "^5.2.1",
        "prettier": "^3.4.1",
        "vue-eslint-parser": "^9.4.3"
    }
}