开发工具之 VSCode

你必须在生命的轮回中，找到本身的位置！      ------ 木法沙

前言

《决战紫禁之巅》叶孤城介绍本身的剑：此剑乃海外寒剑精英，吹毛断发，剑锋三尺三，净重六斤四两。So,我也比较熟悉个人剑——VsCode。

VsCode

代码片断

代码片断能够自定义一些常常用到的操做。好比 我在函数声明和打印 log 时常常用到

{
    "Lamda 表达式": {
        "prefix": "arrow",

        "body": ["($1) => {$2}"],

        "description": "箭头函数"
    },
    "注释模板": {
        "prefix": "zhushi",
        "body": ["/**", "* @author: 张攀钦", "* @description: $1", " */"],
        "description": "注释"
    },
    "forof循环": {
        "prefix": ["for", "forof"],
        "body": ["for (const ${2:item} of ${1:array}) {", "\t$0", "}"],
        "description": "forof循环"
    },
    "forin循环": {
        "prefix": ["forin", "fori"],
        "body": ["for (const ${2:item} in ${1:array}) {", "\t$0", "}"],
        "description": "forof循环"
    },
    "函数声明模板": {
        "prefix": ["funct", "func", "function"],
        "body": ["function ${1:name} ($2) { ", "\t$3", "}"],
        "description": "函数声明模板"
    },
    "函数表达式模板": {
        "prefix": ["cfunct", "cfunc", "cfunction"],
        "body": ["const ${1:func} = function ${2:name}($3) { ", "\t$4", "}"],
        "description": "函数表达式模板"
    },
    "方法注释模板": {
        "prefix": "fzhushi",
        "body": [
            "/**",
            "* @author: 张攀钦",
            "* @description: $1",
            "* @param {$2} $3",
            "* @returns {$4} $5",
            " */"
        ],
        "description": "注释方法"
    },
    "打印日志": {
        "scope": "javascript,typescript",
        "prefix": ["logl", "log"],
        "body": ["console.log($1);", "$2"],
        "description": "console.log打印日志"
    }
}
复制代码

代码片断文件中为 json

{
    "打印日志": {
        // 做用域，html,js
        "scope": "javascript,typescript",
        // 拼写匹配字段
        "prefix": ["logl", "log"],
        // 代码片断内容 $1 下次输入的位置占位，tab 奇幻 $1 $2
        "body": ["console.log($1);", "$2"],
        // 匹配的时候的说明
        "description": "console.log打印日志"
    }
}
复制代码

// settings.json 添加如下属性，自定义的代码片断老是优先显示，否则老是被 VsCode 或插件的排到前面，很不方便
    "editor.snippetSuggestions": "top",
    "editor.tabCompletion": true,
复制代码

快捷捷

做为一个 IDEA 重度使用者，我将 VsCode 的快捷键尽量适配到 IDEA 了。就不推荐个人按键了。应该是最近增长的这个 keymaps 功能，能够将别的开发工具的快捷键搬到 VsCode 里面。真贴心啊 😃😆

• 常常用到的快捷键

F1 查看全部命令

Shift + F12 查看引用,鼠标右键便可查看

Shift + Alt + F12 查看全部引用

alt + F12 查看定义,鼠标右键便可查看

F12 转到定义,鼠标右键便可查看,很容易找到方法定义

触发建议 我自定义了，就不推荐了

触发参数提示 我自定义了，就不推荐了

前进和后端 查看代码调用 Alt + -> Alt + <-

ctrl + ~ 打开或关闭终端

打开上一个编辑器，打开下一个编辑器 Ctrl + Alt + <- ,Ctrl + Alt + ->

VsCode 插件

VsCode 开发工具丰富的插件提高开发效率真的是不要不要的

Chinese (Simplified) Language Pack for Visual Studio Code

这个应该是每一个不习惯英语的开发的福音了 😂😂😂😂

Settings Sync

在强迫症折磨下，我是很是喜欢这个插件的，一键同步全部 VsCode 配置。并且做为一名在 Mac 和 Windows 环境下切换的又高又帅的全栈，mmp，全部的经常使用的快捷键必须适配 windows，否则真会疯的，😆😆，给微软粑粑点个赞

Todo Tree

这个插件能够显示代码中 TODO ，当你有功能没有作完，或者作代码标记是很方便的

Local History

若是你代码变动了，可是没有添加到 git 中，并且又想找回，必定要使用 Local History 哦，文件的变动每一个都有副本哦，代码丢失不存在的哦，记得将 .history 加入到 .gitignore

Code Runner 和调试

这个能够运行 js 代码片断，对于学习 api 仍是颇有帮助的。不过是基于 Node 运行环境将,不过问题不大。

在调试下，能够查看代码运行，对于学习的时候，了解 js 执行上下文和闭包等等颇有用

// settings.json 添加如下配置
"launch": {
        "configurations": [
            {
                "type": "node",
                "request": "launch",
                "name": "app.js",
                "program": "${workspaceFolder}/app.js"
            },
            // 调试当前 js 文件
            {
                "type": "node",
                "request": "launch",
                "name": "current",
                "program": "${file}"
            }
        ]
    }
复制代码

Code Spell Checker

检查单词拼写，对于代码规范帮助挺大的哦

ESLint

这个不用说了，大名鼎鼎的代码规范检查及修复

Prettier - Code formatter

比较习惯用这个格式化代码

GitLens & gitignore & Git History

这几个插件应该算是解决了 VsCode 自带版本管理比较弱的能力了。GitLens 和 Git History 谁用谁知道哦，一直用一直爽，我是不喜欢用别的 git图形化界面管理除了 IDEA 自带的。

vscode-icons

改变 VsCode 自带的 icon ,也是比较喜欢的插件

Auto Close Tag

自动补全 html 标签

Auto Complete Tag

自动补全及修改 html 标签

Auto Import

别问，安装就对了

Auto Rename Tag

别问，安装就对了

Bracket Pair Colorizer

代码小括号和中括号傻傻分不清，建议安装此插件

EditorConfig for VS Code

添加.editorconfig 配置文件

HTML CSS Support

css 代码提示

HTML Snippets

html 代码提示

JavaScript (ES6) code snippets

es6 代码提示

jQuery Code Snippets

原谅我还用 jQuery ,谁让咱 vue 还玩不溜呢,仍是比较佩服这种不要脸的精神的，vue 尚未玩转，还自称全栈，😂

npm Intellisense

别问，安装就对了

Output Colorizer

别问，安装就对了

Path Intellisense

别问，安装就对了

Vetur

别问，安装就对了

Vue Peek

别问，安装就对了