Take a look, do you use vscode like this

As the saying goes: "If a worker wants to do a good job, he must first sharpen his tools." If you want to write code efficiently, you must first use a tool proficiently.

Vscode sets Simplified Chinese

Using foreign tools, the top priority is naturally the indispensable Sinicization.

Press the shortcut key 'ctrl+shift+p', enter 'configure language' in the input box that appears at the top, press Enter, and select 'zh-cn'. At this point, the Chinese plug-in will be installed automatically, and then reopen vscode to see the Chinese interface.

vscode utility plugin

The reason for choosing vscode, in addition to its light weight, is naturally indispensable for its rich plug-in library.

1. Auto Rename Tag

Automatically modify matching html tags. When modifying the tag, do you need to modify the end tag after modifying the start tag? After installing Auto Rename Tag, you only need to modify one tag in the future. Rounding up is equivalent to reducing the workload by half.

2. Prettier

Code formatting plug-in, one-click formatting code, and you can also set automatic formatting when saving. I will put my configuration at the end of the article.

3. code runner

The js file can be directly output to the console. When writing some small algorithms, there is no need to refresh the page frequently to print.

4. Turbo Console Log

Quickly add console.log, comment, enable and delete all console.log with one click. When debugging js, you will probably use console.log, and it is very troublesome to type it by hand every time.

ctrl + alt + l 选中变量之后，生成 console.log
alt + shift + c 注释所有 console.log
alt + shift + u 启用所有 console.log
alt + shift + d 删除所有 console.log
复制代码

Note that only the console.log generated by ctrl + alt + l can be commented, enabled, and deleted. If a friend has installed Evernote, ctrl + alt + l and Evernote are in conflict.

5. css-auto-prefix

Automatically add CSS private prefixes. For example, after writing the transform style, it will automatically add -webkit-, -moz- and other styles.

configuration

The next step is the ubiquitous configuration. I will post my configuration for your reference.

File->Preferences->Settings->Workbench->Setting Editor, change the editor's ui to json, and paste the configuration directly into it

{
    "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"
    }
}
复制代码

hot key

When you are proficient, the shortcut keys can improve the efficiency of typing code more efficiently. I will list my frequently used shortcut keys for your reference.

ctrl + d 选中一个词 鼠标双击也可以
ctrl + f 搜索
ctrl + p 快速打开文件
ctrl + shift + [  折叠区域代码
ctrl + shift + ]  展开区域代码
ctrl + shift + k  删除一行代码，不过我更喜欢用ctrl+x，因为一只手就可以操作
复制代码