Vue and react plugin summary developed by vscode

Vue article

  • Vetur plug-in

This plugin makes.vue files highlighted. But this plug-in cannot be formatted

Vue file fragment

Create a template for the Vue file. In VScode, setting->user sinppets adds vue.json to the search box and replaces the subordinate text. Then, in the newly created file, type vue to quickly create code snippets.

{ "Print to console": { "prefix": "vue", "body": [ "<!-- $1 -->", "<template>", "<div></div>", "</template>", "", "<script>", "export default {", "props:{},", "Data () {return", "{",", ""}}", ", ", "/ / life cycle - has been created (access current this instance)", "created () {"," ", "}, ", "/ / life cycle - mount complete DOM elements (access)", "Mounted () {"," ", "}, ", "the methods: {}", "} ", "< / script >", "< style lang = \" less \ "scoped >" and "/ * @ import url (); introducing the CSS class * /", "$4", "</style>" ], "description": "Log output to console" } }Copy the code

The react article

  • ES7 React/Redux/GraphQL/React-Native snippets

React syntax prompt plugin

General article

  • javaScript(ES6)code snippets

Es6 syntax hint plugin

  • Prettier plug-in

This is a very comprehensive formatting plug-in, you can format the following files

JavaScript ,TypeScript ,Flow , JSX , JSON, CSS , SCSS , Less, HTML , Vue , Angular ,GraphQL , Markdown , YAML

Prettier is also easy to configure, either by project or globally by vscode. If the configuration is performed based on the project, add the. Prettierrc file in the root directory of the project. If following global configuration, the user setting is written in vscode’s setting. The content can be roughly as follows:

{// Enable the default formatting rules for each language "[HTML]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}, "[CSS]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}, "[CSS]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[less]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascript]": { "editor.defaultFormatter": "Esbenp. prettier-vscode"}, /* prettier */" printWidth": 100, // over the Max "prettier. TabWidth ": 4, // Indent "prettier. UseTabs ": false, // Indent "TAB", use space "prettier. Semi ": true, // Add semicolon "prettier. True, // Use single quotes instead of double quotes "prettier.proseWrap": "preserve", // default. ArrowParens: "prettier. ArrowParens ": "avoid", // (x) => {} Does the arrow function need parentheses when there is only one argument? Get: omit parentheses "prettier. BracketSpacing" : true, / / the object, the array brackets and add Spaces between words "{foo: bar}" "prettier. DisableLanguages" : [" vue "], / / no formatting vue file, vue file format alone setting "prettier. EndOfLine" : "auto", / / the end is auto \ n \ r \ n \ r "prettier. EslintIntegration" : False, / / no prettier use validated code format eslint "prettier. HtmlWhitespaceSensitivity" : "ignore", "prettier. IgnorePath" : ", / / no use prettier prettierignore "format file to fill in the project. Prettierignore file" prettier. JsxBracketSameLine ": JsxSingleQuote ": false, JSX use single quotation mark instead of double quotation mark "prettier.parser": "Babylon ", // Formatted parser, default to Babylon "prettier. RequireConfig ": false, // Require a 'prettierconfig' to format prettier "prettier.stylelintIntegration": // Don't let Prettier use stylelint's code format to check "prettier. TrailingComma ": "Es5", / / the last element in the object or array behind whether to add a comma (add the tail to the es5 comma) "prettier. TslintIntegration" : false / / don't let the prettier validated using tslint code format}Copy the code
  • Auto Close Tag

Tag auto – complete plug-in

  • Auto Rename Tag

Tag automatic modification plug-in

  • Bracket Pair ColorZer

Bracket recognition plug-in, with color differentiation, very practical

  • Path Intellisense

Path completion plug-in

  • code runner

You can run js directly from node in vscode

  • LiveServer

The ability to run HTML directly from server in vscode