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が立ち上がる。

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

次へ

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

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

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

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

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

が出たら成功。

保存する際に勝手に 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。