Download address:
vscode /VSCodeOr local address:https:///softs/
Start installing plugins
- Vetur: vue's file code highlighted
- Atom One Dark Theme: Good-looking code color theme
- Simple icon theme: Refreshing folder theme
- Prettier - code : Code formatting
- ESLint: Code specification check
- Debugger for Chrome: Breakpoint debugging
Configure ESLint
Open the user settings file
// vscode enables the option to automatically set tabsize according to file type by default "": false,
// Reset tabsize "": 2,
// #Automatically formatted every time you save it "": true,
// #Every time you save the code, it will be repaired in eslint format "": true,
// Add vue support "": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
// #Let prettier use eslint's code format for verification "": true,
// #Remove the semicolon at the end of the code "": false,
// #Use quotes instead of double quotes "": true,
// #Add a space between the function (name) and the following brackets "": true,
// #This is selected according to the user's own habits "": "js-beautify-html",
// #Let the js in vue be formatted according to the ts format provided by the editor "": "vscode-typescript",
"": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
// #vue component html code formatting style }
}
Save code automatically formats according to eslint, all available
Breakpoint debugging
Official website recommendation/v2/cookbook/
1. Display the source code in the browser
If you are using Vue CLI 2, please set and update the devtool property in config/:
devtool: 'source-map',
If you are using Vue CLI 3, please set and update the devtool properties in:
= {
configureWebpack: {
devtool: 'source-map'
}
}
2. In vscode
Click the Debugger icon in the Activity Bar to go to the Debug view, then click the gear icon to configure a file, and select Chrome/Firefox: Launch environment. Then replace the generated content 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}/" }]
}
]
}
Then go and use it. I hope it will be helpful to everyone's learning and I hope everyone will support me more.