解决prettier和eslint冲突详细配置

这是我的vscode设置,主要是设置vetur里对vue文件各部分的校验工具。解决问题的话就给我点个赞吧!需要安装prettier-eslint这个插件

众所周知,prettier是代码风格标准插件,eslint是代码质量校验插件,所以这两个发生冲突几乎是必然的,所以就有了prettier-eslint这个插件,在保证代码质量的同时,实现代码风格标准化。

而在vue项目中,vetur插件必不可少,所以将vetur中对js格式化的部分设为prettier-eslint

setting.json文件,以下内容直接粘贴即可

{
  "editor.defaultFormatter": "esbenp.prettier-vscode", //自动格式化程序为prettier
  "javascript.updateImportsOnFileMove.enabled": "always", //js重命名文件自动更新路径
  //js自动格式化程序为prettier-eslint
  "[javascript]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  // #让vue中的js按"prettier"格式进行格式化
  "vetur.format.defaultFormatter.html": "prettier",
  "vetur.format.defaultFormatter.js": "prettier-eslint",//主要是这一行解决冲突
  "vetur.format.defaultFormatterOptions": {
    // #vue组件中html代码格式化样式
    // "js-beautify-html": {},
    // "prettier-eslint": {},
    // "prettyhtml": {}
  },
  "editor.suggestSelection": "first", //tab优先选第一个建议
  "editor.formatOnPaste": true, //自动格式化粘贴内容
  "editor.formatOnType": true, //键入一行后自动格式化
}

你可能感兴趣的:(javascript,vscode,vue.js)