0.最实用的网站5rit.xyz

1. 最好用的代码自动补全插件A-super-comprehensive

代码补全 包含 vue,webpack,bootstrap3,javascript,css,html,php,ajax,node 等等…

2. 注释翻译A-super-translate

许多优秀的项目,都有丰富的注释,使用者可以快速理解代码意图。但是如果使用者并不熟习注释的语言,会带来理解困难。本插件使用 Google Translate API 翻译 VSCode 的编程语言的注释。

3. 重命名的Auto Rename Tag

When you rename one HTML/XML tag, automatically rename the paired HTML/XML tag

4. 自动对其的Auto-Align

这是一个对齐工具,可以进行一些自定义。它会排队赋值运算符(=并:在选定的文本默认情况下)。

5. Beautify

多种语言的代码格式化

6. Beautify css/sass/scss/less

Beautify css, sass and less code (extension for Visual Studio Code)

7.注释友好的Better Comments

The Better Comments extension will help you create more human-friendly comments in your code.

8.Bracket Pair Colorizer

此扩展名允许用颜色标识匹配的括号。用户可以定义要匹配的字符以及要使用的颜色。

9.Color Highlight

扩展程序可样式化文档中的CSS /网页颜色。

10.让注释更美观comment aligner

对齐行尾注释的新扩展。它可以使您的内联尾随注释对齐,但常规代码行除外。

11.ES7 React/Redux/GraphQL/React-Native snippets

该扩展为您提供ES7中的JavaScript和React / Redux片段,以及针对VS Code的 Babel插件功能

12.filesize

在编辑器的状态栏中显示聚焦文件的大小。

13.Guides

显示缩进的Guides指导线

14.引入文件大小Import Cost

15.indent-rainbow

16.HTML Snippets

17.JavaScript (ES6) code snippets

18.jQuery Code Snippets

19.Markdown All in One

20.markdown-formatter

21.高对比主题Monokai-Contrast Theme

22.Node Snippets

23.Path Intellisense

24.有趣插件Power Mode的无限可能

{
    "workbench.iconTheme": "vscode-great-icons",
    "editor.renderIndentGuides": true,
    "guides.enabled": false,
    // 启用扩展。
    "editor.renderWhitespace": "boundary",
    //控制编辑器在空白字符上显示符号的方式。
    "workbench.colorCustomizations": {
        "editorWhitespace.foreground": "#00ff15d3"
    },
    "open-in-browser.default": "chrome",
    //Set default browser
    "files.defaultLanguage": "html",
    //分配给新文件的默认语言模式。


    // Defining custom colors instead of default "Rainbow" for dark backgrounds.
    // (Sorry: Changing them needs an editor restart for now!)
    "indentRainbow.colors": [
        "rgba(255,255,64,0.2)",
        "rgba(127,255,127,0.2)",
        "rgba(255,127,255,0.2)",
        "rgba(79,236,236,0.2)"
    ],

    // The indent color if the number of spaces is not a multiple of "tabSize".
    "indentRainbow.errorColor": "rgba(128,32,32,0.6)",

    // The indent color when there is a mix between spaces and tabs.
    // To be disabled this coloring set this to an empty string.
    "indentRainbow.tabmixColor": "rgba(128,32,96,0.6)",
    "guides.active.extraIndent": true,
    "guides.active.style": "double", 
    "html.format.wrapAttributes": "force",
    "[html]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "rainbowString": {
        "extensions": [
            ".css",
            ".csx",
            ".fs",
            ".fsx",
            ".js",
            ".html",
            ".jsx",
            ".ts",
            ".tsx",
            ".csproj",
            ".fsproj"
        ]
    },
    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": true,
    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": true,
    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": true,
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "turboConsoleLog.logMessagePrefix": "张浩雨",
    "vscodePluginDemo.showTip": true,
    "[javascript]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "liveServer.settings.donotShowInfoMsg": true,
    "workbench.startupEditor": "newUntitledFile",
    "window.zoomLevel": 0,
    "[json]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    // "workbench.colorTheme": "Monokai",
    "[markdown]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.autoClosingBrackets": "always",
    "editor.autoClosingOvertype": "always",
    "editor.autoClosingQuotes": "always",
    "editor.fastScrollSensitivity": 3,
    "editor.hover.delay": 2000,


    "powermode.enabled": true,
    "powermode.enableShake": false,
    "powermode.presets": "fireworks",


    "powermode.explosionSize": 30,
    // // 爆炸的大小。对于值x,该高度设置为x REM,宽度设置为x CH。
    "powermode.maxExplosions": 5,
    // // 减少这个将减少一次渲染的爆炸次数。

    "powermode.gifMode": "continue",
    // // restart每次显示时都会重启一个gif,它continue会从停止的地方播放gif。
    // // continue当你只有1个可见的gif时,restart它特别有用,当你有多个时很有用,但可能会降低性能

    "powermode.backgroundMode": "image",
    // // 影响用于显示GIF的CSS属性。` mask`使用gifs作为遮罩让背景通过(类似于原子能量模式),而'image`将显示实际的gif。


    "powermode.explosionDuration": 1000,
    // // 确定爆炸持续的时间(毫秒)。设置为0以使其永远持续

    "powermode.explosionOrder": "random",
    // // 将按顺序循环爆破,random将随机选择一个,并提供一个数字将在爆炸列表中的那个(从零开始)索引处选择爆炸
    // // sequential将顺序执行

    "powermode.explosionFrequency": 6,
    // // 增加此值将增加爆炸之间的击键次数。这意味着当你打字时爆炸之间会有间隙,但可能有助于提高性能。
    "powermode.explosionOffset": 0.42,
    // "workbench.colorTheme": "Monokai Crete",
    "sync.autoUpload": true,
    "better-comments.highlightPlainText": true,
    "workbench.colorTheme": "Monokai-Contrast",
    "javascript.updateImportsOnFileMove.enabled": "never",
    // 爆炸下降。ds





    // power 


    // "powermode.explosionOffset": 0.27,
    // "powermode.explosionOffset": 0.33,
    // "powermode.customExplosions": [
    //     // "https://media.giphy.com/media/xUA7aXJY46jN2P6gGk/giphy.gif",
    //     // "https://media.giphy.com/media/l0IykOPjEJopboxWw/giphy.gif",
    //     // "https://media.giphy.com/media/3o7btLYqcZhUb2GP16/giphy.gif",
    //     // "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563605786609&di=b9b77d464b1e93e6f7b31f4314663682&imgtype=0&src=http%3A%2F%2Fimg0.ph.126.net%2FKgYvPxjTJMUI62urCsZNEQ%3D%3D%2F6630836868256937679.gif",

    //     // "/Users/haoyuzhang/Desktop/HTML5/stage2/canvas/pika1.gif",
    //     // "/Users/haoyuzhang/Desktop/HTML5/stage2/canvas/boll2.gif",
    //     // "/Users/haoyuzhang/Desktop/HTML5/stage2/canvas/boll.gif",
    //     "/Users/haoyuzhang/Desktop/HTML5/stage2/canvas/pika1.gif", 
    // ],
    // // 提供你自己的GIF使用
    // // 使用base64编码的GIF或完整URI选择您自己的爆炸

    // "powermode.customCss": {
    //     "mix-blend-mode": "color-dodge",

    // },
}

25.Prettier - Code formatter

26.正则预览的Regex Previewer

27.最方便的Turbo Console Log

28.Vant Snippets

彩蛋

用户代码片段

{
	// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
	// Placeholders with the same ids are connected.
	// Example:
	"Print to console": {
		"scope": "javascript,typescript",
		"prefix": "log",
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log output to console"
	},
	"zhanghaoyu0001": {
		"scope": "javascript,typescript",
		"prefix": "da*",
		"body": [
			"data : {",
				"$1",
			"}$2"
		],
		"description": "data: {    }"
	},
	"zhanghaoyu0002": {
		"prefix": "te*",
		"body": [
			"<template>",
			"    $1",
			"</template>$2"
		],
		"description": "<template>    </template>"
	},
	"zhanghaoyu0003": {
		"scope":"html",
		"prefix": "st*",
		"body": [
			"<style>",
			"    $1",
			"</style>$2"
		],
		"description": "<style>    </style>"
	},
	"zhanghaoyu0004": {
		"scope":"html",
		"prefix": "sscript*",
		"body": [
			"<script>",
			"    $1",
			"</script>$2"
		],
		"description": "<script>    </script>"
	},
}