はじめに
タイトルのとおり｡
Vue.js + VSCode の環境で､ファイル保存時に自動整形する際の設定で時間がかかったのでメモを残します｡
あくまで自分のためのメモなので細かい情報とか説明は載せていないです｡
環境
| バージョン | 備考 | |
|---|---|---|
| macOS | 10.14.x ( Mojave ) | |
| Node.js | v10.16.3 | |
| npm | v6.9.0 | |
| yarn | v1.21.1 | |
| Vue.js | v2.6.10 |
設定
package.json
package.json
{
"name": "hogehoge",
"private": true,
"dependencies": {
"vue": "2.6.10",
"vue-eslint-parser": "6.0.4",
"vue-loader": "15.7.1",
"vue-router": "3.0.7",
"vue-template-compiler": "2.6.10",
"vuex": "3.1.1"
},
"devDependencies": {
"eslint": "6.8.0",
"eslint-config-prettier": "6.9.0",
"eslint-plugin-prettier": "3.1.2",
"eslint-plugin-vue": "6.1.2",
"webpack-dev-server": "3.7.2"
}
}
上記を設定した状態で npm install or yarn install で必要な npm モジュールが環境にインストールされる｡
.eslintrc.js
.eslintrc.js
module.exports = {
plugins: [
'vue'
],
extends: [
'eslint:recommended',
'plugin:vue/recommended'
],
rules: {
'vue/html-closing-bracket-newline': [2, {'multiline': 'never'}],
'no-extra-parens': 1,
'no-multi-spaces': 2,
'no-multiple-empty-lines': [2, {'max': 1}],
'func-call-spacing': [2, 'never'],
'no-unneeded-ternary': 2,
'semi': [2, 'never'],
'quotes': [2, 'single'],
'no-var': 2,
'indent': [2, 2],
'space-in-parens': [2, 'never'],
'no-console': 0,
'comma-spacing': 2,
'computed-property-spacing': 2,
'key-spacing': 2,
'keyword-spacing': 2,
}
}
settings.json
settings.json
{
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"typescript.format.insertSpaceBeforeFunctionParenthesis": true,
"editor.tabSize": 2,
"editor.formatOnSave": false,
"eslint.enable": true,
"files.associations": {
"*.vue": "vue"
},
"eslint.validate": [
"javascript",
"javascriptreact",
"vue"
],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
あ､一応上記の設定にあたっての備忘録がてらに｡｡｡
最初､こちら を参考に設定していたのだが､ eslint.validate の設定で
ワーニング箇所
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true,
},
],
としていたところ､
Auto Fix is enabled by default. Use the single string form.
というワーニングが発生していた.
ググってみたところ ESLint not working in VS CODE? で Tips が紹介されていたので､それを元に修正して前掲の形にしたところ､ワーニングは解消された｡
あと こちら にも当該ワーニング箇所の記述方法が示されていた