阅读 1353

开发工具之 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

别问,安装就对了

关注下面的标签,发现更多相似文章
评论