vscode配置冲突

Question

用vscode开发vue,安装了vetur,prettier,eslint。
但是无法设置tabsize:4,template属性设置force无效

Answer 1

不清楚你的 VSCode 版本和插件版本，先按我说的来设置试一下吧。

settings.json 里改：

{
   ...
   "prettier.tabWidth": 4, // 加这行
   "vetur.format.defaultFormatter.css": "prettier", // 加这行
   "vetur.format.defaultFormatter.less": "prettier", // 用LESS了就加这行
   "vetur.format.defaultFormatter.scss": "prettier", // 用SCSS了就加这行
   "vetur.format.defaultFormatter.postcss": "prettier", // 用PostCSS了就加这行
   "vetur.format.defaultFormatter.js": "prettier", // 加这行
   "vetur.format.defaultFormatterOptions": {
      ...
      "prettier": {
        "tabWidth": 4, // 兼容低版本
        "singleQuote": true,
        "semi": false
      } // 加这段，把 .prettierrc.js 删了
   }
}

Answer 2

tabsize设置为4：

setting.json添加
"editor.tabSize": 4

.prettierrc.js添加
tabWidth: 4

---

换行问题"wrap_attributes": "force"会和prettier的printWidth属性冲突（prettier的printWidth默认100），所以改成 "wrap_attributes": "aligned-multiple"