vscode 开发Vue项目的方法步骤

// vscode默认启用了根据文件类型自动设置tabsize的选项
 \"editor.detectIndentation\": false,
 // 重新设定tabsize
 \"editor.tabSize\": 2,
 // #每次保存的时候自动格式化
 \"editor.formatOnSave\": true,
 // #每次保存的时候将代码按eslint格式进行修复
 \"eslint.autoFixOnSave\": true,
 // 添加 vue 支持
 \"eslint.validate\": [
  \" \",
  \" react\",
  {
   \"language\": \"vue\",
   \"autoFix\": true
  }
 ],
 // #让prettier使用eslint的代码格式进行校验
 \"prettier.eslintIntegration\": true,
 // #去掉代码结尾的分号
 \"prettier.semi\": false,
 // #使用带引号替代双引号
 \"prettier.singleQuote\": true,
 // #让函数(名)和后面的括号之间加个空格
 \" .format.insertSpaceBeforeFunctionParenthesis\": true,
 // #这个按用户自身习惯选择
 \"vetur.format.defaultFormatter.html\": \"js-beautify-html\",
 // #让vue中的js按编辑器自带的ts格式进行格式化
 \"vetur.format.defaultFormatter.js\": \"vscode-type \",
 \"vetur.format.defaultFormatterOptions\": {
  \"js-beautify-html\": {
   \"wrap_attributes\": \"force-aligned\"
   // #vue组件中html代码格式化样式
  }
 }

devtool: \'source-map\',

module.exports = {
 configureWebpack: {
  devtool: \'source-map\'
 }
}

{
 \"version\": \"0.2.0\",
 \"configurations\": [
  {
   \"type\": \"chrome\",
   \"request\": \"launch\",
   \"name\": \"vuejs: chrome\",
   \"url\": \"http://localhost:8080\",
   \"webRoot\": \"${workspaceFolder}/src\",
   \"break \": true,
   \"sourceMapPathOverrides\": {
    \"webpack:///src/*\": \"${webRoot}/*\"
   }
  },
  {
   \"type\": \"firefox\",
   \"request\": \"launch\",
   \"name\": \"vuejs: firefox\",
   \"url\": \"http://localhost:8080\",
   \"webRoot\": \"${workspaceFolder}/src\",
   \"pathMappings\": [{ \"url\": \"webpack:///src/\", \"path\": \"${webRoot}/\" }]
  }
 ]
}