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

Editor to share with you what vscode plug-ins must be installed in the development of the vue project, I believe most people do not know much about it, so share this article for your reference. I hope you will gain a lot after reading this article. Let's learn about it together.

Develop some vscode essential plug-ins for the vue project

Eslint

Check whether the code conforms to the specification

GitLens  

Git hint

Language-stylus  

Stylus syntax support

Path Intellisense  

Relative, absolute path hint

Prettier formatter  

Code formatting

Vetur  

Vue syntax support. Including syntax highlighting, syntax code hints, syntax lint detection, etc.

Vue VSCode Snippets

Vue Grammar fragment extension

Npm Intellisense  

Import and require npm modules are automatically completed.

Auto Close Tag

Automatically close HTML/XML tags

Auto Rename Tag

Automatically complete the synchronous modification of the label on the other side

JavaScript (ES6) code snippets

ES6 syntax smart prompt and fast input, in addition to js also supports .ts, .jsx, .tsx, .html, .vue, saving time to configure it to support various js code files

HTML CSS Support

Let the html tag write the styles supported by the class smart prompt for the current project.

Bracket Pair Colorizer

Add different colors to the parentheses to make it easy to distinguish different blocks. Users can define different types and colors of parentheses.

VSCode wrote vue project for the first time and generated .vue template with one click.

File-> preferences-> user code snippet-> search vue.json file open

After opening it, delete the code inside and copy the following code

{"Print to console": {"prefix": "vue", "body": [",", "$5

"," / / other files can be imported here (such as component, tool js, third-party plug-in js,json file) Picture files, etc.) "," / / for example: import "component name" from'"component path"' ",", "export default {", "/ / components introduced by import need to be injected into the object before they can be used", "components: {},"data () {" "/ / data is stored here", "return {", "", "} ","}, "," / / the listening attribute is similar to the data concept, "computed: {}," / / Monitoring data changes in data "," watch: {}, " "/ / method collection", "methods: {", "", "},", "/ Lifecycle-creation completed (you can access the current this instance)", "created () {" ",", "},", "/ / Lifecycle-Mount completed (you can access DOM elements)", "mounted () {", ","}, " "beforeCreate () {}, / / Lifecycle-before creation", "beforeMount () {}, / / Lifecycle-before mounting", "beforeUpdate () {}, / / Lifecycle-before update", "updated () {}" / / Lifecycle-after update "," beforeDestroy () {}, / / Lifecycle-before destruction "," destroyed () {}, / / Lifecycle-destruction completed "," activated () {}, / / if the page has keep-alive caching This function triggers ","} "," / / @ import url ($3). Introduce public css classes "," $4 ","], "description": "Log output to console"}}

Ps: if less is not installed, the runtime will report an error.

Vue install lessnpm install less less-loader-nothing needs to be configured above save-dev# cli3 # change configuration file build/webpack.base.conf.js# cli3 the following need to configure rules: [/ / countless lines are omitted here Other existing rules {test: /\ .less $, loader: "styleMurloaderdeveloping vscode loaderlesslessloader"}] at this time, create a new .vue file, enter vue and press the tab of the keyboard. These are all the contents of this article, "what are the vscode plug-ins that must be installed in the development of the vue project?" 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.