2019/12/24追記
こちらの情報は古いので、削除予定です。
2019/7/29追記
create-nuxt-appのバージョンが上がりLinter / Formatterの仕様が変更になりました。最新の情報はこちらをご覧ください。
注意 Nuxt.js(v2.3.4)から、Linterの設定が自動化！？
Nuxt.js(v2.3.4)から、Nuxtのインストール時にLinter / Formatterを選ぶことで、JavaScript Standard Styleがディフォルトで設定されるようになりました。
というか、@nuxtjs/eslint-config経由で、JavaScript Standard StyleやVueファイルなどを始めとした、Nuxt.jsに必要なLinterがディフォルトで入いることで、より強力Linter/Formatterを何も設定せずに使えるようになっています。（まだ、ざっくりとしか見てませんが…すごい。）
（2019/1/22加筆）
注意 以下は、Nuxt.js(v2.3.4)未満を利用した場合の設定。
本記事でやりたかったことが、ほぼ以下記事に記載されていましたので、参考にしつつ自分用に加筆した内容となっています。
↓
Nuxt.jsのプロジェクトにESLint + JavaScript Standard Styleを導入する方法
nuxt.js(v2)では、ESLintとPrettierの依存関係を初回インストールできるようになった。素晴らしい。
ただ、初学者には「ESLint」と「Prettier」の両方を覚えるのは混乱を招くようなので、「ESLintのみ」を利用とし、個人的に好きな「JavaScript Standard Style」のルール利用方法を記載。
コアな開発でなければ、EsLintのみで十分でしょ。
Nuxtをインストール
公式ドキュメントを参考に、ESlint込みでNuxt.jsをインストール。
※prettierは利用しないので、勢い余ってyesにしないように注意
$ npx create-nuxt-app
// ESLintのみ使用したいため以下設定（他はご自由に）
? Use eslint yes
? Use prettier no
JavaScript Standard Styleのnpmパッケージをインストール
ディフォルトで使用(追加でnpmパッケージインストールせずに使用)できるeslint:recommendedルールはチェックがゆるいので、JavaScript Standard Styleのstandardルールを利用。
「standard」とか「王道」とかの響きに弱い。
$ npm install --save-dev eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node
参考：https://github.com/standard/eslint-config-standard#usage
.eslintrc.jsを修正
nuxt.jsインストール時に「? Use eslint」で「yes」を選択していると、自動で.eslintrc.jsファイルが生成される。そこに'standard',を追記。
module.exports = {
extends: [
'standard', // <- 追記
'plugin:vue/recommended'
],
...
}
好みに合わせてルールを追加
個人的にはcomma-dangleの修正のみで良いと思う。（diff時に「,」をつけたり消したりが目に引っかかってチェックに集中できないので。）
他にも、追加したければ、以下を参考に加筆修正
module.exports = {
rules: {
'comma-dangle': ['error', 'only-multiline'], // <-追加
...
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
}
動作確認その１
とりあえず、適当なscriptを記載
<script>
// ...
export default {
data() {
return {
object: {
a:1,
b: 2,
},
ary: [1, 2,],
}
},
mounted () {
const x = 1
if (x === 1) {
console.log('test')
}
}
}
</script>
$ npm run lintを実行して、エラーが出たら成功。
$ npm run lint
↓
/Users/yorname/project/pages/index.vue
32:7 error Missing space before function parentheses space-before-function-paren
35:11 error Missing space before value for key 'a' key-spacing
38:17 error Unexpected trailing comma comma-dangle
38:17 error A space is required after ',' comma-spacing
40:1 error Expected indentation of 2 spaces but found 0 indent
41:1 error Expected indentation of 2 spaces but found 4 indent
42:1 error Expected indentation of 4 spaces but found 0 indent
43:1 error Expected indentation of 4 spaces but found 8 indent
45:1 error Expected indentation of 4 spaces but found 0 indent
✖ 9 problems (9 errors, 0 warnings)
9 errors and 0 warnings potentially fixable with the `--fix` option.
自動整形ができるようにする。
package.jsonに以下追記
{
"scripts": {
"lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
...
},
}
動作確認
$ npm run lintfix
$ npm run lintfixを実行して、整形されたら成功。
<script>
// ...
export default {
components: {
Logo
},
data () {
return {
object: {
a: 1,
b: 2,
},
ary: [1, 2],
}
},
mounted () {
const x = 1
if (x === 1) {
console.log('test')
}
}
}
</script>
よしよし。美しい。
Link
以下、公開中のnuxt.js(v2)関連の記事一覧
技術よりの記事
- nuxt.js(v2)のインストール〜ESLint設定まで
- nuxt.js(v2)の作業ディレクトリを整理
- nuxt.js(v2)のベースURLをターミナルからコントロール
- nuxt.js(v2)でpug/stylusを利用する
- nuxt.js(v2)でIE11対応をする（CSS編）
- nuxt.js(v2)でIE11対応をする（JS編）
- nuxt.js(v2)で絶対パス(https~)を取得する方法
- nuxt.js(v2)でSEOに必要なmeta(OGP)を入れたい
- nuxt.js(v2)でSEOに必要なmeta(OGP)で入力漏れの事故をなくす
よく使うプラグインのお話
- nuxt.js(v2)で便利なvue-mqを使ってみるがSSRモードでコンソールエラーがでるので確認してみた。
- nuxt-linkでスムーズスクロールするならvue-scrolltoが便利で気が利いている…と思う。
- nuxt.jsでパララックスをするならvue-parallax-jsがお手軽。Cool!