create-nuxt-appでスタートしたプロジェクトの設定をあとから変更する

以下の例は、「やっぱりEslint/Prettierを使いたい」ケースです。

必要なパッケージを追加する

yarn add eslint eslint-loader babel-eslint eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier prettier

• eslint
• eslint-loader
• babel-eslint
• eslint-plugin-vue
• eslint-config-prettier
• eslint-plugin-prettier
• prettier

設定ファイルを用意する

.eslintrc.js

// example
module.exports = {
    root: true,
    env: {
        browser: true,
        node: true
    },
    parserOptions: {
        parser: 'babel-eslint'
    },
    extends: [
        'plugin:vue/recommended',
        'plugin:prettier/recommended'
    ],
    plugins: [
        'vue',
        'prettier'
    ],
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
    }
}

.prettierrc

{
    "semi": false,
    "singleQuote": true
}

nuxt.config.jsに当該箇所を追加

nuxt.config.js

module.exports = {
    // ...
    build: {
        /*
        ** You can extend webpack config here
        */
        extend(config, ctx) {
            // Run ESLint on save
            if (ctx.isDev && ctx.isClient) {
                config.module.rules.push({
                    enforce: 'pre',
                    test: /\.(js|vue)$/,
                    loader: 'eslint-loader',
                    exclude: /(node_modules)/
                })
            }
        },
        // ...
    },
    // ...
}

実行

./node_modules/.bin/eslint --ext .js,.vue --ignore-path .gitignore .

nuxt-appでeslint/prettierをオンにしてプロジェクトを作成した場合は、
下記のようなlintとprecommitがscriptに設定される

package.json

{
    "scripts": {
        "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
        "precommit": "yarn lint"
    }
}