Vue.js
ndenv
YARN
lint
vue-cli

Vueプロジェクト作成方法と自動整形lint設定方法 - vue ui 使用


前提


  • node.js 8.9以上がインストールされていること

  • nodeのバージョン指定がされていること


    • (node -v と打ったら v8.12.0 などと出てきたらok)



上記がわからない場合

-> node.js のインストール方法等はこちら


vue cliを使えるようにする(インストールしていない場合)


  • npmでインストールする場合

$ npm install -g @vue/cli


  • yarnでインストールする場合

$ yarn global add @vue/cli

(これは一回やればok)

バージョンあげるときはupgrade

$ yarn upgrade @vue/cli


vue-cliでプロジェクト作成

vue uiでプロジェクトを作成する方法

$ vue ui  (vue create)

でGUIでvue-cliが立ち上がる。

スクリーンショット 2018-10-29 17.36.26.png

Home(Vueプロジェクトマネージャー)で作成を押す。

スクリーンショット 2018-10-29 17.37.33.png

次へ

スクリーンショット 2018-10-29 17.37.45.png

詳細の設定。

簡単に設定する場合はデフォルトでもいいが、今回は手動を選択。

スクリーンショット 2018-10-29 17.38.10.png

ONにすると機能追加されることになる。

スクリーンショット 2018-10-29 17.38.39.png

CSSプリプロセッサの選択とLintの設定。

終わったら「プロジェクトを作成する」を押す。

コンソールが動くと思うので、

スクリーンショット 2018-10-29 18.35.19.png

が出たら成功。


保存する際に勝手に lint --fix する設定

vue.config.js を作成。


vue.config.js

module.exports = {

chainWebpack: config => {
config.module
.rule('eslint')
.use('eslint-loader')
.options({
fix: true,
})
},
}

詳細設定

package.json または .eslintrc.js に設定。


package.json

    "rules": {

"no-console": 0,
"prettier/prettier": [
"error",
{
"semi": false,
"trailingComma": "all",
"singleQuote": true
}
]
},

"no-console" => 0にすると、console.logの使用を許可する設定になる。


vue.config.js

module.exports = {

css: {
loaderOptions: {
// pass options to sass-loader
sass: {
// @/ is an alias to src/
// so this assumes you have a file named `src/variables.scss`
data: `@import "@/variables.scss";`
}
}
}
}

はcssを自動的に読み込む設定も追加できる。

https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders

を参考


注意

eslint-loaderのバージョンによってlintが動かない場合がある。

その場合は、eslint-loaderのバージョンを変更。

yarn.lockファイルの eslint-loader@^2.0.0: の項目のところを全部削除


yarn.lock

eslint-loader@^2.0.0:

version "2.1.1"
resolved "https://registry.yarnpkg.com/eslint-loader/-/eslint-loader-2.1.1.tgz*****
integrity *****
dependencies:
loader-fs-cache "^1.0.0"
loader-utils "^1.0.2"
object-assign "^4.0.1"
object-hash "^1.1.4"
rimraf "^2.6.1"

"@vue/cli-plugin-eslint@^3.0.5": の中の

eslint-loader "^2.0.0"eslint-loader "2.1.0" に書き換えて (^を削除)


yarn.lock

"@vue/cli-plugin-eslint@^3.0.4":

version "3.0.5"
resolved "https://registry.yarnpkg.com/@vue/cli-plugin-eslint/-/cli-plugin-eslint-3.0.5.tgz#******"
integrity sha512*****
dependencies:
"@vue/cli-shared-utils" "^3.0.5"
babel-eslint "^8.2.5"
eslint "^4.19.1"
- eslint-loader "^2.0.0" //ここの行を書き換え
+ eslint-loader "2.1.0"
eslint-plugin-vue "^4.5.0"

$ yarn

実行後


yarn.lock

eslint-loader@2.1.0:

version "2.1.0"
resolved "https://registry.yarnpkg.com/eslint-loader/-/eslint-loader-2.1.0.tgz#*****"
integrity sha*******
dependencies:
loader-fs-cache "^1.0.0"
loader-utils "^1.0.2"
object-assign "^4.0.1"
object-hash "^1.1.4"
rimraf "^2.6.1"

になればok。