Help us understand the problem. What is going on with this article?

Vue.jsでSPAサイトを作成するチュートリアル【5. JS編】

More than 1 year has passed since last update.

Vue.jsを使い始めていろいろできることが多くなってきたので、整理する意味も兼ねてチュートリアルにまとめます。
今回はコーポレートサイトを想定して作成していきます。
※記事が長くなったのでチュートリアルを分割しました。

目次

前提

  • タスクはnpm scriptsで一限管理
  • コマンドはyarnを使用
  • vue-cliwebpack-simpleを使用

バージョン

  • "vue": "^2.5.11"
  • "webpack": "^3.6.0"
  • "eslint": "^4.17.0"

ESLint

ESLintを設定していきましょう。
今回はeslint-config-standardを採用します。

必要なパッケージを追加します。

$ yarn add eslint eslint-plugin-vue eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node

設定ファイルを追加します。

.eslintrc
{
  "extends": [
    "standard",
    "plugin:vue/essential"
  ],
  "rules": {
  }
}

無視したいファイル群は/vendorにまとめて.eslintignoreファイルを作成して指定すると無視できます。

.eslintignore
/src/js/vendor/**/*.js

参考:Configuring ESLint

VSCodeを使用している人は、以下を参考にVeturとESLintをインストールして設定すると良いみたいです。

参考:Visual Studio Code で使う | eslint-plugin-vue を作っている話

VSCode以外の人は、各自で使用しているテキストエディタでの設定を調べてみてください。

ESLintはCLIで監視してエラーを表示させることもできますが、集中したい部分に集中できなくなる場合もあるので、個人的にはテキストエディタでの表示が好みです。
しかし、機械的に変換できるエラーは自動的に修正することもできるので、その機械変換させるコマンドはnpm scriptsに記述しておいて使いたい時に実行するようにしましょう。

package.json
{
  // 省略
  "scripts": {
    "eslint": "eslint src --fix",
  // 省略
}

これで以下をCLIで実行すれば不要なカンマやセミコロン等を機械的に削除してくれます。
ひとまず、今まで書いたものでエラーが出ているものを一通り確認し、機械的に変換してくれそうなところが以下で変換できれば成功です。

$ yarn eslint

まだテキストエディタで赤くなってエラーになっているところがないか確認し、どんどん潰していきましょう。

以下のようなエラーがどうしても消えない場合があると思います。

'app' is assigned a value but never used src/main.js

上記は無視しても動作上問題なさそうですが、気になる人は以下の参考にしてみてください。

参考:【Vue.jsエラー】hogehoge is assigned a value but never used

まとめ

Vue.js自体がJSなので「JS編ってなんだか気持ち悪いなぁ」とは思いながらJSファイルに関する内容をまとめるところに落ち着きました。
快適な開発環境を構築してストレスがかからず品質を担保できるようにしましょう。
(本当はテスト系ツールも書きたかったんですが、まだ導入していないので導入方法がわかれば掲載しようと思っています。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away