How does vscode support vue-VSCode-php.cn

Home

Development Tools

VSCode

How does vscode support vue

尚

Jan 11, 2020 pm 01:53 PM

vscode

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: &#39;source-map&#39;,

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

module.exports = {
  configureWebpack: {
    devtool: &#39;source-map&#39;
  }
}

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

vscode c header file errorApr 15, 2025 pm 09:30 PM

The header file errors that occur when writing C code in Visual Studio Code are usually caused by the following reasons: 1. Path setting errors; 2. Header file spelling errors; 3. Header file version mismatch; 4. Dependency header file is missing; 5. Definition of header files is repeated. To resolve these errors, check and correct the include path, double-check the spelling error, confirm that the header version matches, include all necessary dependency header files, and make sure that the header files are not defined duplicately.

How to set vscode in ChineseApr 15, 2025 pm 09:27 PM

There are two ways to set up a Chinese language in Visual Studio Code: 1. Install the Chinese language package; 2. Modify the "locale" settings in the configuration file. Make sure Visual Studio Code version is 1.17 or higher.

vscode sets the header file pathApr 15, 2025 pm 09:24 PM

To set the header file path in Visual Studio Code, open the User Settings panel, add the path in the Include Path field, and click the Save button. Example: { "includePath": ["/path/to/header1", "/path/to/header2"] }.

How to install Chinese plug-in with vscodeApr 15, 2025 pm 09:21 PM

Steps to install Chinese plug-in in VSCode: Search for "Chinese" in the extended market. Select and install the required plugins. The plug-in will be automatically enabled after installation. If you need to enable it manually, please click "Enable" in the plug-in list. After installing and enabling the plug-in, it is ready to be used.

What's wrong with Vs Code header file?Apr 15, 2025 pm 09:18 PM

Vs Code header file error reason: header file path error header file is not included, header file is too old compiler settings error code syntax error dependency missing Visual Studio Code version problem solution: header file correction path update header file check compiler settings fix code error Install dependency update Visual Studio Code

How to solve the error in vscode c header fileApr 15, 2025 pm 09:15 PM

How to solve the error in VSCode C header file: Make sure the header file is in a directory that the compiler can find. Check whether the header file path is correct. Make sure the header file exists. Make sure that the declarations in the header file match the source file. Use precompiler directives to conditionally include header files. Check that the compiler settings are correct. Clear the project directory. Seek external help.

vscode compilation cannot find the header fileApr 15, 2025 pm 09:12 PM

Reasons for the header file not found in Visual Studio Code and its workaround: Include path is not configured correctly: Add the header file path to the include path. Header file misspelled or incorrect path: Check spelling and path. The header file does not exist: Make sure the file exists in the specified path. Environment variable not set: Set environment variables (such as including paths) if necessary. Compiler version incompatible: Make sure the compiler is compatible with the header file. The third-party library is not installed correctly: The third-party library is installed correctly. Other project dependencies: Make sure that the dependency project is built and contains the necessary header files. VSCode Caching Issue: Restart or clear the VSCode cache.

How to define header files for vscodeApr 15, 2025 pm 09:09 PM

How to define header files using Visual Studio Code? Create a header file and declare symbols in the header file using the .h or .hpp suffix name (such as classes, functions, variables) Compile the program using the #include directive to include the header file in the source file. The header file will be included and the declared symbols are available.

See all articles