How does vscode support vue

Required plug-ins: ESLint, Prettier - Code formatter, Vetur

Open the user settings file:

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

Save the code and automatically format it according to eslint.

Breakpoint debugging (Debugger for Chrome needs to be installed)

1. Display the source code in the browser. If you are using Vue CLI 2, please set and update the config The devtool attribute in /index.js:

devtool: 'source-map',

If you are using Vue CLI 3, please set and update the devtool attribute in vue.config.js:

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

2 , click the Debugger icon in the Activity Bar in vscode to come to the Debug view, then click the gear icon to configure a launch.json file, and select Chrome/Firefox: Launch environment. Then replace the contents of the generated launch.json with the corresponding configuration:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": 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}/" }]
    }
  ]
}

Recommended tutorial: vscode tutorial

The above is the detailed content of How does vscode support vue. For more information, please follow other related articles on the PHP Chinese website!