-
Auto Close Tag自动添加HTML / XML关闭标 -
Bracket Pair Colorizer颜色识别匹配括号 -
Code Runner非常强大的一款插件，能够运行多种语言的代码片段或代码文件：C，C ++，Java，JavaScript，PHP，Python，Perl，Ruby，Go等等
安装完成后，右上角会出现：▶
4.ESLint EsLint可以帮助我们检查Javascript编程时的语法错误
-
HTML Snippets代码自动填充 -
Indenticator突出目前的缩进深度 -
Live Server浏览器实时刷新 -
npm Intellisenserequire 时的包提示 -
Path Intellisense路径自动补全 -
VeturVue 语法高亮显示, 语法错误检查, 代码自动补全
(配合 ESLint 插件效果更佳) -
vscode-icons左侧文件目录的文件夹和文件都会显示相应的图标 -
Npm Intellisense自动路劲补全，默认不带这个功能的，赶紧装 -
HTMLHinthtml代码检测 -
Bracket Pair Colorizer让括号拥有独立的颜色，易于区分。可以配合任意主题使用。 -
Import Cost引入包大小计算,对于项目打包后体积掌握很有帮助 -
JavaScript(ES6) snippetsJavaScript(ES6) snippets -
Node.js Modules Intellisense为JavaScript和TypeScript模块自动补全import语句。 -
BeautifyBeautify是jsBeautifier的插件，支持JavaScript、JSON、CSS和HTML一键格式化。 -
JS Refactor提供了许多重构JavaScript 代码的方法，例如提取代码中的变量和方法，将函数转换为使用箭头函数或模板字面量和将函数导出。 -
cssrem将css中的px自动转换为rem.再也不用计算器了（大漠大神推介） -
View In Browser迅速通过浏览器打开html文件 -
ES7快速template,js生成插件 scc,src。
23： vue保存时，自动化格式。
实现保存时自动代码格式化：
1）文件 ------.>【首选项】---------->【设置】；
2）搜索emmet.include;
3）在settings.json下的【工作区设置】中添加以下语句：
"editor.formatOnType": true,
"editor.formatOnSave": true
"vetur.format.defaultFormatter.html": "js-beautify-html",
"editor.codeActionsOnSave": {
"source.fixAll ": true,
"source.fixAll.eslint": true
},
"eslint.format.enable": true,
//autoFix默认开启，只需输入字符串数组即可
"eslint.validate": [
"javascript",
"vue",
"html"
],
"vetur.format.defaultFormatter.js": "none",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_line_length": 120,
"wrap_attributes": "true",
"end_with_newline": false
}
}
24： vue快速生成模板
设置 - 用户代码片段 - 搜素vue
{
// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and
// description. 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": {
"prefix": "sc",
"body": [
"<template>",
" <div class='$2'>$5</div>",
"</template>",
"",
"<script>",
"export default {",
" components: {},",
" data() {",
" return {",
"",
" };",
" },",
" computed: {},",
" watch: {},",
" methods: {",
"",
" },",
" created() {",
"",
" },",
" mounted() {",
"",
" },",
"};",
"</script>",
"",
"<style lang='scss' scoped>",
"$4",
"</style>"
],
"description": "Log output to console"
}
}
