VS Code配置
settings.json
{
"workbench.startupEditor": "newUntitledFile",
"vetur.format.defaultFormatter.js": "prettier-eslint",
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
{
"language": "vue",
"autoFix": true
}
],
"eslint.options": {
"plugins": [
"html"
]
},
"vetur.format.defaultFormatter.html": "prettier",
"editor.fontFamily": "'JetBrains Mono', 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'",
"terminal.integrated.fontFamily": "monospace"
}
sudo npm -g install eslint eslint-plugin-html
VS Code extensions
- Vetur
- Auto Close Tag
- Auto Rename Tag
- Debugger for Chrome
- ESLint
- IntelliJ IDEA Key Bindings
- GitLens
- SVG Viewer
docker扩展安装后报错
sudo usermod -aG docker $USER
debug
-
修改devtool为source-map
-
VS Code安装扩展Debugger for Chrome
- 点击在 Activity Bar 里的 Debugger 图标来到 Debug 视图，然后点击那个齿轮图标来配置一个 launch.json 的文件，选择 Chrome: Launch 环境。然后将生成的 launch.json 的内容替换成为相应的配置：
{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:8080/*", "webRoot": "${workspaceFolder}/src", "sourceMapPathOverrides": { "webpack:///./src/*": "${webRoot}/*" } } ] }推荐: 如果chrome启动时增加了–remote-debugging-port=9222,可以使用attach模式（debug时使用已有chrome，且chrome会包含扩展）
{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "attach", "name": "Launch Chrome against localhost", "url": "http://localhost:9527/*", "webRoot": "${workspaceFolder}/src", "port": 9222, "sourceMapPathOverrides": { "webpack:///./src/*": "${webRoot}/*" } } ] } -
npm run serve
- 来到 Debug 视图，选择 ‘Launch Chrome against localhost’ 配置，然后按 F5 或点击那个绿色的 play 按钮，可看到已进入断点。