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

Editor to share with you how to configure vue in VSCode, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

After downloading vscode from the official website, the installation opens and prompts you to install the Chinese language pack. Follow the prompts to install and restart, and the interface becomes the Chinese interface.

The interface theme uses Materia Theme, the interface style is very clean, the color is also more eye-friendly, and the mood becomes fresh when writing code.

Icon display using Material Icon Theme, file icons are very complete, with Materia Theme is very good-looking

Because I use the vue technology stack, so I also need to recognize the vue syntax. Here, it is recommended to use Vetur as the language recognition engine, providing syntax recognition, formatting, and related tips.

Configuration formatting

Vetur has its own formatting tool, which uses prettier formatting scheme. For more information, you can use ctrl/command + to open the settings.

You can see that js's formatting engine uses prettier by default

However, in general projects, it is recommended to use eslint unified source code format, so it is necessary to adapt vuter to eslint.

Install eslint and prettier extensions

Follow the eslint extension prompts, to use eslint normally, but also to follow eslint globally

Npm install-g eslint

Formatted with a custom configuration, here are my vscode custom settings

{"workbench.iconTheme": "eq-material-theme-icons", "workbench.colorTheme": "Material Theme", "materialTheme.fixIconsRunning": false, "editor.fontSize": 16, / / font size / / the following is the code formatting configuration "editor.formatOnSave": true, / / automatically format "editor.tabSize" every time you save: 2, / / the code is indented and modified to 2 spaces "eslint.autoFixOnSave": false / / each time the code is saved in eslint format to fix "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 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}]}

Each time it is saved, it will be formatted to liberate the labor force, and the effect is as follows

Common plug-in

When Auto Rename Tag changes the signature, it automatically changes the closed signature.

Bookmarks bookmark plug-in, record the key points of the code, when review, it is easier to get the corresponding points.

Bracket Pair Colorizer parenthesis coloring, accurate recognition for multiple nested parentheses

When declaring variables in Change Case code, you can switch to hump style, constant style, and other styles for existing variables.

Codelf makes me angry when it comes to code naming. Half of his programming time is to figure out how to name it more appropriately and appropriately. With this artifact, although it can not solve the problem of naming and trying to break the brain, it at least provides suggestions that can be solved more quickly to avoid brain damage.

Cssrem a VSCode plug-in that converts CSS values to REM

Html fonts are designed to use 14px, so when transferring, the corresponding relationship should be 1rem = 14px, so it should be configured in the user settings.

/ / third-party plug-in cssrem configuration "cssrem.rootFontSize": 14

Vue Peek right-click to open or preview referenced components

Filesize calculates the size of the source file and displays it in the lower left corner

GitLens git history view, submission record view, history comparison, version rollback, artifact does not parse

Import Cost calculates the file size introduced by import

IntelliSense for CSS class names in HTML class provides the CSS class name for the HTML attribute based on the definition found in the workspace or an external file referenced by the link element.

Because we use the vue language to develop, we also need to do some prompt configuration of css for vue

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

Live Server provides instant service preview of HTML and instant refresh of code changes.

Introducing IntelliSense into Path Intellisense path

Npm-intellisense npm module introduces IntelliSense

RegExp Preview and Editor regular expression Preview and Edit

Settings Sync synchronizes your vscode settings, including plug-ins, themes, all user data

SVG Viewer Preview SVG

Todo Tree displays a list of TODO in your code

Translate translation

Tslint ts code format detection tool

Version Lens npm version detection

Vscode-fileheader generates document comment headers

JavaScript (ES6) code snippets es code snippet

Copy Relative Path replication relative path

These are all the contents of the article "how to configure vue in VSCode". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.