Heim > Entwicklungswerkzeuge > VSCode > Wie unterstützt vscode vue

Wie unterstützt vscode vue

Freigeben: 2020-01-11 13:53:33
Original
3629 Leute haben es durchsucht

Wie unterstützt vscode vue

Erfordert Plug-Ins: ESLint, Prettier - Code Formatter, Vetur

Öffnen Sie die Benutzereinstellungsdatei:

// 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"
    }
  },
Nach dem Login kopieren

Speichern Sie den Code und formatieren Sie ihn automatisch es laut eslint.

Breakpoint-Debugging (Debugger für Chrome muss installiert sein)

1. Wenn Sie Vue CLI 2 verwenden, setzen Sie bitte und Aktualisieren Sie die Konfiguration. Das Devtool-Attribut in /index.js:

devtool: 'source-map',
Nach dem Login kopieren

Wenn Sie Vue CLI 3 verwenden, legen Sie bitte das Devtool-Attribut in vue.config.js fest und aktualisieren Sie es:

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}
Nach dem Login kopieren

2, klicken Sie auf das Debugger-Symbol in der Aktivitätsleiste in vscode, um zur Debug-Ansicht zu gelangen, klicken Sie dann auf das Zahnradsymbol, um eine launch.json-Datei zu konfigurieren, und wählen Sie Chrome/Firefox: Startumgebung aus. Ersetzen Sie dann den Inhalt der generierten launch.json durch die entsprechende Konfiguration:

{
  "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}/" }]
    }
  ]
}
Nach dem Login kopieren

Empfohlenes Tutorial: vscode-Tutorial

Das obige ist der detaillierte Inhalt vonWie unterstützt vscode vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage