Visual Studio Code で Vue の開発環境を整える
全国65,535人くらいの凄腕ハッカーフレンズの皆さんこんにちは!
たーのしー!
概要
Visual Studio Code での Vue の開発環境を整える。今回は特にQuasar Frameworkにおいて、lintやコード補完が動くことを目標とする。
- ファイル保存時に自動でコードフォーマット&lintのfix
- よく使うものはコード補完
必要なもの
vscode上のextension
- HTML Snippets …HTML5のコード補完
- ESLint … jsのlint
- language-stylus … stylusのvscodeサポート
- vetur … vueのvscodeサポート
- VueHelper … vueのコード補完
stylintについて
正直いい感じのプラグインはないが、必要な人は下記を使用
- doiuse
vscodeの設定
settings.jsの設定を抜粋
/* Html, JavaScript, Vue */ "files.associations": { "*.vue": "vue" }, // vueにcssのemmet追加 "emmet.syntaxProfiles": { "vue": "css" }, // vueだけで追加したい設定 "[vue]": { "editor.formatOnSave": true }, "eslint.enable": true, // 適応するファイルタイプを決定 "eslint.validate": [ "javascript", "javascriptreact", { "language": "vue", "autoFix": true } ], // プロジェクト配下のeslintrc.jsを読み込み "eslint.options": { "configFile": ".eslintrc.js" }, // 保存時に自動フォーマット "eslint.autoFixOnSave": true,
補足情報
files.associationsいらないと思うが、この設定がないとvue内のstyleタグが崩壊する。 また、files.associationsで設定しない場合は、eslint.validateでのlanguage指定をhtmlにする必要がある。 VueHelperの補完が起動後すぐ働かない場合があるが、その場合は空のTypeScriptファイル(.ts)を作成してコード補完してみることで動作確認ができる。
.eslintrc.jsの設定
module.exports = { root: true, parser: 'vue-eslint-parser', parserOptions: { sourceType: 'module' }, env: { browser: true }, globals: { 'cordova': true, 'Velocity': true, 'DEV': true, 'PROD': true, '__THEME': true }, // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style extends: 'standard', // add your custom rules here 'rules': { // allow paren-less arrow functions 'arrow-parens': 0, 'one-var': 0, // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, 'brace-style': [2, 'stroustrup', { 'allowSingleLine': true }] } }
補足情報
parserにvue-eslint-parser
を指定すること。pluginsの項目にhtml
が存在する場合は削除すること!
まとめ
- vscodeならvetur使おう
- vueにeslintが直接使えないことはeslintの制限なので、パーサに
vue-eslint-parser
指定しよう - Quasar Frameworkまじで凄いので、とりあえずドキュメント読んで!