Q&A前提・実現したいこと
PrettierでVueファイルのコードを整形後、npm run dev(watch, prod)を実行したところエラーが発生した。Prettierでコードの整形を行い、npm run devを行ってもエラーが発生しない方法を教えていただきたい。
発生している問題・エラーメッセージ
※./resources/js/components/User/Sections.vueはPrettierを使用してコードの整形を行ったファイル
terminal
1ERROR in ./resources/js/components/User/Sections.vue?vue&type=template&id=26d30eb7& (./node_modules/vue- 2loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader- 3options!./resources/js/components/User/Sections.vue?vue&type=template&id=26d30eb7&) 4 5Module build failed (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): 6SyntaxError: Unexpected token (1:2404) 7at Parser.pp$4.raise (/var/www/public/WHI/WHI/node_modules/vue-template-es2015-compiler/buble.js:2757:13) 8at Parser.pp.unexpected (/var/www/public/WHI/WHI/node_modules/vue-template-es2015-compiler/buble.js:647:8) 9at Parser.pp.expect (/var/www/public/WHI/WHI/node_modules/vue-template-es2015-compiler/buble.js:641:26) 10at Parser.pp$3.parseExprList (/var/www/public/WHI/WHI/node_modules/vue-template-es2015-compiler/buble.js:2651:14) 11at Parser.pp$3.parseSubscripts (/var/www/public/WHI/WHI/node_modules/vue-template-es2015-compiler/buble.js:2075:29) 12at Parser.pp$3.parseExprSubscripts (/var/www/public/WHI/WHI/node_modules/vue-template-es2015-compiler/buble.js:2050:21) 13at Parser.pp$3.parseMaybeUnary (/var/www/public/WHI/WHI/node_modules/vue-template-es2015-compiler/buble.js:2024:17) 14at Parser.pp$3.parseExprOps (/var/www/public/WHI/WHI/node_modules/vue-template-es2015-compiler/buble.js:1966:19) 15at Parser.pp$3.parseMaybeConditional (/var/www/public/WHI/WHI/node_modules/vue-template-es2015-compiler/buble.js:1949:19) 16at Parser.pp$3.parseMaybeAssign (/var/www/public/WHI/WHI/node_modules/vue-template-es2015-compiler/buble.js:1925:19) 17at Parser.pp$3.parseExpression (/var/www/public/WHI/WHI/node_modules/vue-template-es2015-compiler/buble.js:1896:19) 18at Parser.pp$1.parseStatement (/var/www/public/WHI/WHI/node_modules/vue-template-es2015-compiler/buble.js:815:45) 19at Parser.parseStatement (/var/www/public/WHI/WHI/node_modules/vue-template-es2015-compiler/buble.js:6116:31) 20at Parser.pp$1.parseBlock (/var/www/public/WHI/WHI/node_modules/vue-template-es2015-compiler/buble.js:1112:23) 21at Parser.pp$3.parseFunctionBody (/var/www/public/WHI/WHI/node_modules/vue-template-es2015-compiler/buble.js:2600:22) 22at Parser.pp$1.parseFunction (/var/www/public/WHI/WHI/node_modules/vue-template-es2015-compiler/buble.js:1219:8) 23 24webpack compiled with 1 error
ツールのバージョン
package.json
json
1{ 2 "private": true, 3 "scripts": { 4 "dev": "npm run development", 5 "development": "mix", 6 "watch": "mix watch", 7 "watch-poll": "mix watch -- --watch-options-poll=1000", 8 "hot": "mix watch --hot", 9 "prod": "npm run production", 10 "production": "mix --production" 11 }, 12 "devDependencies": { 13 "@popperjs/core": "^2.10.2", 14 "axios": "^0.21", 15 "bootstrap": "^5.1.3", 16 "deepmerge": "^4.2.2", 17 "laravel-mix": "^6.0.6", 18 "lodash": "^4.17.19", 19 "postcss": "^8.1.14", 20 "prettier": "2.5.1", 21 "resolve-url-loader": "^3.1.2", 22 "sass": "~1.32", 23 "sass-loader": "^11.1.1", 24 "vue": "^2.6.12", 25 "vue-loader": "^15.9.8", 26 "vue-template-compiler": "^2.6.12" 27 }, 28 "dependencies": { 29 "js-cookie": "^3.0.1", 30 "vue-router": "^3.5.3", 31 "vuetify": "^2.6.3", 32 "vuex": "^3.6.2", 33 "vuex-persistedstate": "^4.1.0" 34 } 35}
.prettierrc.json
json
1{ 2 "printWidth": 80, 3 "tabWidth": 4, 4 "useTabs": false, 5 "semi": true, 6 "singleQuote": false, 7 "quoteProps": "as-needed", 8 "jsxSingleQuote": false, 9 "trailingComma": "es5", 10 "bracketSpacing": true, 11 "jsxBracketSameLine": false, 12 "arrowParens": "always", 13 "rangeStart": 0, 14 "filepath": "none", 15 "requirePragma": false, 16 "insertPragma": false, 17 "proseWrap": "preserve", 18 "htmlWhitespaceSensitivity": "css", 19 "vueIndentScriptAndStyle": false, 20 "endOfLine": "auto" 21 }
試したこと
npm run install、 npm run updateでpackage.jsonのバージョンを変更した
回答1件
0
自己解決
この問題の原因は、Prettierでのコード整形の対象となっていた./resources/js/components/User/Sections.vueのコードのうちの
js
1v-model="updateSubstance = content.substance"
がPrettierにより
js
1v-model="(updateSubstance = content.substance)"
に書き換えられたことであり、それに対してnpm run devがエラーを出していたようです。
※updateSubstanceとcontent.substanceはSections.vue内で宣言された変数。つまり、updateSubstanceにcontent.substanceの値が代入されるということ。
今回の問題の解決方法はPrettierがエラーを出すようなコードの整形をした際にそれを目視で確認して直すということでしたが、Prettierの設定を変えるなどの人力がいらない方法での解決はできないのでしょうかね......
投稿2022/03/14 06:13
総合スコア92
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。