Visual Studio Code的十项开发技巧("Visual Studio Code必备：10项高效开发技巧揭秘")

原创

ithorizon 7个月前 (10-20) 阅读数 28 #后端开发

Visual Studio Code必备：10项高效开发技巧揭秘

一、智能代码补全与提示

Visual Studio Code 提供了强势的智能代码补全和提示功能，能够选用上下文自动提示变量、函数、方法和属性等。这个功能可以大大减成本时间开发效能。


// 示例代码
function greet(name) {
    return "Hello, " + name;
}
// 当输入 greet(") 时，VS Code 会自动提示

二、代码片段（Snippets）的使用

代码片段是预定义的代码模板，可以帮助你迅速编写常用的代码结构。你可以自定义代码片段，也可以使用社区共享的代码片段。


// 示例代码片段
{
    "Print to console": {
        "prefix": "log",
        "body": [
            "console.log('$1');",
            "$2"
        ],
        "description": "Log output to console"
    }
}
// 使用代码片段
log // 输入 log 后按 Tab，将展开为 console.log('');

三、代码格式化与美化

Visual Studio Code 赞成多种代码格式化工具，如 Prettier、ESLint、Stylelint 等。这些工具可以帮助你自动格式化代码，使其更加整洁、一致。

// 安装 Prettier 插件后，在配置文件中添加以下内容

{

"editor.codeActionsOnSave": {

"source.fixAll": true

"editor.formatOnSave": true,

"prettier.requireConfig": true

}

四、集成终端（Integrated Terminal）

Visual Studio Code 内置了集成终端，可以直接在编辑器中运行命令行工具，如 Git、npm、yarn 等。这可以让你在不离开编辑器的情况下执行各种任务。

// 打开集成终端

Ctrl + `` (反引号键)

// 在终端中运行命令

npm install

git status

五、代码调试

Visual Studio Code 提供了强势的代码调试功能，赞成断点、单步执行、查看变量值等。这令调试代码变得更加单纯。


// 示例调试代码
for (let i = 0; i < 10; i++) {
    console.log(i);
}
// 在第2行设置断点

六、代码版本控制（Git）

Visual Studio Code 内置了 Git 版本控制功能，可以直接在编辑器中进行提交、拉取、推送等操作。这令代码版本管理更加方便。

// 初始化 Git 仓库

git init

// 添加文件到暂存区

git add .

// 提交代码

git commit -m "Initial commit"

七、多光标与代码同步编辑

Visual Studio Code 赞成多光标编辑，可以同时在多个位置进行编辑，减成本时间代码编辑效能。同时，还赞成代码同步编辑，方便协作。

// 使用多光标

Ctrl + Click (在多个位置点击)

// 使用代码同步编辑

Ctrl + Shift + U

八、代码片段复用

在 Visual Studio Code 中，你可以将常用的代码片段保存为文件，方便在不同的项目或文件中复用。


// 创建代码片段文件
 snippets.json
// 示例代码片段
{
    "Print to console": {
        "prefix": "log",
        "body": [
            "console.log('$1');",
            "$2"
        ],
        "description": "Log output to console"
    }
}

九、自定义快捷键

Visual Studio Code 允许自定义快捷键，你可以选用自己的习惯设置快捷键，减成本时间操作效能。


// 修改快捷键配置文件
{
    "keybindings": [
        {
            "key": "Ctrl+Shift+S",
            "command": "workbench.action.files.saveAll"
        }
    ]
}