Shulou(Shulou.com)06/02 Report--

This article mainly introduces how to add configuration to vscode+vue, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

How does vscode+vue add configuration?

Plug-ins that vscode+vue has to use and configurations that have to be added

First complain: it's sad to use vscode for the first time, it doesn't matter if you don't need anything, it doesn't matter if there is no basic error detection in the code, and there is no automatic completion of Html tags (of course, there is, but you just need to configure yourself), can't you install these together during installation or initialization? you still have to find plug-ins one by one.

Recommended for related tutorials: vscode tutorial

Complain to complain, can use Google Baidu is the boss.

File auto-save settings

One of the powerful features of vscode is that it compiles automatically without refreshing the page, but automatic compilation needs to be done after the document is saved. If you don't bother to press "Ctrl+S" after editing, then set up the document to save automatically.

File-> Auto Save

The above are the quick settings. For more details, please see the vscode settings. The path is as follows:

File-> preferences-> Settings, you can also click the "{}" icon in the upper right corner to open the JSON editing window. You can also set the auto-save time here.

Automatic completion of Html tags

Before using other editors (HBuilder, WS, VS, etc.) to write html code, entering the first half of the html tag will automatically complete the second half, but not to vscode, it is not suitable.

In the extensions installed with vscode, one of the major functions of Emmet is to complete the code, which needs to be set manually.

Add the following configuration code to the settings (both settings need to be configured):

{"emmet.triggerExpansionOnTab": true, "files.associations": {"* .js": "html", "* .vue": "html"}}

Highlight, syntax plug-in

Usually write code will often encounter errors, but do not know what went wrong, why wrong, how to modify, and so on, as shown in the following figure:

When this kind of error occurs, we can use these plug-ins to assist coding. Vetur, ESLint and Prettier plug-ins are installed and configured as follows:

"editor.lineNumbers": "on", / / Open line number "editor.quickSuggestions": {/ / enable automatic display recommendation "other": true, "comments": true, "strings": true}, "editor.tabSize": 2, / / Tab symbol eslint "editor.formatOnSave": true, / / automatically format "eslint.autoFixOnSave": true when saving / / automatically fix the code in ESLint format "prettier.eslintIntegration": true, / / Let prettier use the eslint code format to verify "prettier.semi": false, / / remove the semicolon "prettier.singleQuote" at the end of the code: true, / / use quotation marks instead of double quotation marks "javascript.format.insertSpaceBeforeFunctionParenthesis": true / / add a space between the function (name) and the following parentheses "vetur.format.defaultFormatter.html": "js-beautify-html", / / format html "vetur.format.defaultFormatter.js": "vscode-typescript" in vue / / Let the js in vue format "vetur.format.defaultFormatterOptions": {"js-beautify-html": {"wrap_attributes": "force-aligned" / / attribute forced line breaks}, "eslint.validate": [/ / enable error checking in .vue files "javascript", "javascriptreact", {"language": "html" "autoFix": true}, {"language": "vue", "autoFix": true}]

In this way, writing vue with vscode is a little easier.

The complete configuration is posted below:

{"files.autoGuessEncoding": true, "files.autoSave": "afterDelay", / / automatically save "editor.lineNumbers": "on", / / Open line number "editor.quickSuggestions": {/ / enable automatic display recommendation "other": true, "comments": true, "strings": true}, "editor.tabSize": 2, / / Tab symbol eslint "editor.formatOnSave": true / / automatically format "eslint.autoFixOnSave": true when saving, / / automatically fix "prettier.eslintIntegration": true, / / let prettier use the code format of eslint to verify "prettier.semi": false, / / remove the semicolon "prettier.singleQuote" at the end of the code: true, / / use quotes instead of double quotes "javascript.format.insertSpaceBeforeFunctionParenthesis": true / / add a space between the function (name) and the following parentheses "vetur.format.defaultFormatter.html": "js-beautify-html", / / format html "vetur.format.defaultFormatter.js": "vscode-typescript" in vue / / Let the js in vue format "vetur.format.defaultFormatterOptions": {"js-beautify-html": {"wrap_attributes": "force-aligned" / / attribute forced line breaks}, "eslint.validate": [/ / enable error checking in .vue files "javascript", "javascriptreact", {"language": "html" "autoFix": true}, {"language": "vue", "autoFix": true}], "emmet.triggerExpansionOnTab": true, "files.associations": {/ / documents to be completed by html "* .js": "html", "* .vue": "html"}} Thank you for reading this article carefully I hope the article "how to add configuration of vscode+vue" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.