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

vscode设置简体中文

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

按快捷键 ‘ctrl+shift+p’，在顶部出现的输入框输入‘configure language’，按回车，选择‘zh-cn’。此时，会自动安装中文插件，然后重新打开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，因为一只手就可以操作

快看一看，你是不是这样使用的vscode