俗话说：“工欲善其事，必先利其器”。想要高效的编写代码，自然要先熟练的使用一款工具。

vscode设置简体中文

使用国外的工具，头等大事自然是必不可少的汉化。

vscode实用插件

选择vscode的原因，除了它的轻量之外，自然少不了它丰富的插件库。

1. Auto Rename Tag

自动修改匹配的html标签。在修改标签的时候，是不是需要修改完开始标签之后还需要修改结束标签。安装Auto Rename Tag，以后只需要修改一个标签就可以了，四舍五入就等于减少一半工作量啊。

2. Prettier

代码格式化插件，一键格式化代码，也可以设置保存自动格式化。我会将我的配置放在文章末尾。

3. code runner

可以直接js文件，在控制台输出结果。在写一些小算法的时候再也不用频繁刷新页面打印了。

4. Turbo Console Log

快捷添加 console.log，一键 注释、启用、删除 所有 console.log。调试js时候大概都会用console.log，每次手敲都很麻烦。

ctrl + alt + l 选中变量之后，生成 console.log

alt + shift + c 注释所有 console.log

alt + shift + u 启用所有 console.log

alt + shift + d 删除所有 console.log

注意，只能注释、启用、删除ctrl + alt + l生成的console.log。如果有小伙伴安装了印象笔记，ctrl + alt + l和印象笔记是冲突的。

5. css-auto-prefix

自动添加 CSS 私有前缀。
比如写完transform样式，会自动添加-webkit-、-moz-等样式。

配置

接下来便是无处不在的配置了，将我的配置贴出来，供大家参考。

文件->首选项->设置->工作台->设置编辑器，将editor的ui改为json，将配置直接粘贴进去

{
"eslint.enable": true,
"eslint.run": "onType",
"eslint.options": {
"extensions": [
".js",
".vue",
".jsx",
".tsx"

        ]

    },
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true

    },
"workbench.iconTheme": "material-icon-theme",
"workbench.colorTheme": "Monokai",
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"

    },
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"

    },
"workbench.settings.editor": "json",
"editor.tabSize": 2,
//失去焦点后自动保存
"files.autoSave": "onFocusChange",
// #值设置为true时，每次保存的时候自动格式化；
"editor.formatOnSave": true,
// 在使用搜索功能时，将这些文件夹/文件排除在外
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/target": true,
"**/logs": true,

    },
// #让vue中的js按"prettier"格式进行格式化
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// #vue组件中html代码格式化样式
"wrap_attributes": "force-aligned", //也可以设置为“auto”，效果会不一样
"wrap_line_length": 200,
"end_with_newline": false,
"semi": false,
"singleQuote": true

        },
"prettier": {
"semi": false,
"singleQuote": true

        }

    },
"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"

    }

}

快捷键

熟练的时候快捷键，可以更高效的提升敲代码的效率。我将我常用的快捷键列出，供大家参考。

ctrl + d 选中一个词 鼠标双击也可以

ctrl + f 搜索

ctrl + p 快速打开文件

ctrl + shift + [  折叠区域代码

ctrl + shift + ]  展开区域代码

ctrl + shift + k  删除一行代码，不过我更喜欢用ctrl+x，因为一只手就可以操作