How to configure vue in VSCode and use Vetur language recognition engine!

How to configure vue in VSCode? Identify vue syntax? The following article will introduce to you how to use Vetur as a language recognition engine. Let us create the best VSCode for vuers!

After downloading vscode from the official website, the installation opens and you are prompted to install a Chinese language pack. Follow the prompts to install and restart, and the interface becomes a Chinese interface. [Recommended learning: "vscode tutorial"]

uses Materia Theme as the interface theme. The interface style is very clean, the colors are eye-friendly, and I feel good when writing code. Follow the refreshing~

icon display uses Material Icon Theme, the file icon is very complete, and it looks very good with Materia Theme

because I The vue technology stack is used, so it is necessary to identify the vue syntax. It is recommended to follow Vetur as the language recognition engine to provide syntax recognition, formatting, and related tips.

Configuration formatting

vetur comes with its own formatting tool and uses the prettier formatting scheme. For details, please see the configuration and use ctrl/command,Open settings

You can see that the js formatting engine uses prettier

by default, but it is recommended to use eslintunification for general projects Source code format, so vuter needs to be adapted to eslint

Install eslint and prettier extensions

Follow eslint Extension tip, to use eslint normally, you must also format it globally according to eslint

npm install -g eslint

. The following is my vscode custom settings

{
  "workbench.iconTheme": "eq-material-theme-icons",
  "workbench.colorTheme": "Material Theme",
  "materialTheme.fixIconsRunning": false,
  "editor.fontSize": 16, // 字体大小
  // 以下是代码格式化配置
  "editor.formatOnSave": true, // 每次保存的时候自动格式化
  "editor.tabSize": 2, // 代码缩进修改成2个空格
  "eslint.autoFixOnSave": false, // 每次保存的时候将代码按eslint格式进行修复
  "prettier.eslintIntegration": true, // 让prettier使用eslint的代码格式进行校验
  "prettier.semi": false, // 去掉代码结尾的分号
  "prettier.singleQuote": true, // 使用带引号替代双引号
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 让函数(名)和后面的括号之间加个空格
  "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
  "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned" //属性强制折行对齐
    }
  },
  "eslint.validate": [
    //开启对.vue文件中错误的检查
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ]
}

Every time I save Formatting, liberating labor, the effect is as follows

Commonly used plug-ins

• Auto Rename Tag When changing the tag name, automatically change the name of the closed tag
• Bookmarks Bookmark plug-in, record key points of the code, easier to get the corresponding points during review
• Bracket Pair Colorizer Bracket coloring, for multiple embedded The set of brackets corresponds to accurate identification
• Change Case When declaring code variables, you can switch existing variables to camel case, constant, or other styles
• Codelf I get angry when I talk about code naming. Half of the programming time is spent thinking about how to name it more appropriately and appropriately. With this artifact, although it cannot solve the difficult problem of naming, it at least provides a solution. Suggestion, can solve it faster and avoid imagining things
• cssrem A VSCode plug-in for converting CSS values ​​​​to REM

html The font I designed here is to use 14px, so when transferring, the corresponding relationship should be 1rem = 14px, so it needs to be configured in the user settings

// 第三方插件cssrem配置
  "cssrem.rootFontSize": 14

• Vue Peek Right-click to open or preview the referenced component
• filesize Calculate the source file size and display it in the lower left corner
• GitLens git history viewing, submission record viewing, history comparison, version rollback, artifact Not parsing
• Import Cost Calculate the file size introduced by import
• IntelliSense for CSS class names in HTML class is based on the definition found in the workspace or Provides CSS class name completion for HTML attributes via external files referenced by the link element.

Because we use vue language to develop, we also need to configure css prompts for vue

"html-css-class-completion.includeGlobPattern": "**/*.{css,html,vue}"

• Live Server Provides support for Real-time service preview of HTML, instant refresh of code changes

• Path Intellisense Path introduction of intelligent sensing

• npm -intellisense npm module introduces intelligent sensing

• RegExp Preview and Editor Regular expression preview and editing

• Settings Sync Synchronize your vscode settings, including plug-ins, themes and all user data

• SVG Viewer Preview SVG

• Todo Tree Display the TODO list in your code

• ##translate Translate

• Tslint ts code format detection tool

• Version Lens npm version detection

• vscode-fileheader Generate document comment header

• JavaScript (ES6) code snippets es code snippets

• Copy Relative Path Copy relative path

Programming Video! !

The above is the detailed content of How to configure vue in VSCode and use Vetur language recognition engine!. For more information, please follow other related articles on the PHP Chinese website!