Vscode快速配置(1)之基础工具

VScode快速配置(1)之基础工具(v1.0)

Author:Once Day Date:2023年2月19日

漫漫长路,才刚刚开始…

(嵌入式程序员开发环境)

1. 概述

下面是一些基础插件,基本上嵌入式程序员都会用到。

首先是远程连接,为什么呢?这是考虑嵌入式程序员一般在Linux环境下编译测试,但在windows环境下工作。

一般可以在各类云服务提供商购买云服务器,然后通过git工具开始远程开发,好处非常明显,对于很多小型开发任务和简易的算法测试,云服务随时可用。

如果是复杂的编译,如Linux内核,那么还是应该在一台强力主机中使用Linux环境编译,如虚拟机和Windows子系统。简而言之,远程连接开发已是主流了。

VS code运行对于设备有一定的要求,至少需要有两个以上的核,2GB以上内存,工作起来就会比较流畅。

其次,会考虑一些基础工具,主要如下几类:

  • 主题插件,用于提升感官体验。
  • 标签工具,用于插入提示符,快速定位代码。
  • 括号匹配和检查工具,用于提高括号的阅读性。
  • Git辅助工具,包括git辅助操作和MR评审阅读。
  • 拼写检查工具,防止写错英文单词。
  • 文本辅助信息插入,如声明信息和文本格式。
  • 基础的编辑器设置。

除了现在的这些功能,后续也会不定时更新,在学习中进步,在进步中学习。能熟练和高效使用工具也是加快自身效率的有效方式。

括号工具[Deprecated] Bracket Pair Colorizer 2 - Visual Studio Marketplace目前已成为VS code的原生工具,新版本无需额外下载了。

2. 远程连接

第一个就是正常的SSH连接:

  • Remote - SSH - Visual Studio Marketplace

Vscode快速配置(1)之基础工具_第1张图片

特点如下:

  • 可以在目标部署机器或者其他配置的机器上开发,跳过本地机器的限制。
  • 在不同的开发环境中快速交换数据,不用担心对本地机器造成影响。
  • 能在不同的机器上debug,无需限制于某一台机器。

目前支持平台如下:

  • x86_64 Debian 8+, Ubuntu 16.04+, CentOS / RHEL 7+ Linux.
  • ARMv7l (AArch32) Raspbian Stretch/9+ (32-bit).
  • ARMv8l (AArch64) Ubuntu 18.04+ (64-bit).
  • Windows 10 / Server 2016/2019 (1803+) using the official OpenSSH Server.
  • macOS 10.14+ (Mojave) SSH hosts with Remote Login enabled.

SSH远程连接最好用于可信的远程主机,否则远程主机可能利用远程连接在本地机器上执行代码,并造成严重后果。

SSH的配置可参考文档:

  • (4)VScode之ssh基础配置_Once_day的博客-CSDN博客
  • 生成/添加SSH公钥 - Gitee.com

打开VScode后,点击左下角的><图标就可以打开远程连接配置文件了,可以选择按提示一步一步执行,也可以直接打开配置文件,一次性配置到位。

Host server2023
  HostName onceday.work
  User ubuntu
  IdentityFile C:/Users/cg/.ssh/id_rsa2

正常的配置就上面的四个关键字:

  • Host,给这个远程终端取一个名字,合适就好。
  • HostName,远程主机的地址,可以填写域名,也可以填写IP地址。
  • User,登入使用的账户名。
  • IdentityFile,使用的ssh秘钥位置,这个可以不给定。

最好使用秘钥文件登入,密码登入麻烦且不可靠

更多配置关键字,可以参考下面文档:

  • ssh_config(5): OpenSSH SSH client config files - Linux man page (die.net)

除了远程SSH连接,还有其他的(远程)连接可用,如下:

  • WSL - Visual Studio Marketplace
  • Dev Containers - Visual Studio Marketplace
  • Remote - Tunnels - Visual Studio Marketplace

这些(远程)连接的使用过程大同小异,可自行浏览

3. 主题和编辑器设置

这里推荐使用One Dark Pro主题插件,当前VScode上最火爆的主题。

  • One Dark Pro - Visual Studio Marketplace

Vscode快速配置(1)之基础工具_第2张图片

该主题可一键美化编辑器、终端命令行,还能提供Markdown文档的预览。

这里特别推荐JetBrains Mono字体,该字体针对代码阅读特别设计,更宽更大,易于阅读和分辨

  • JetBrains Mono: A free and open source typeface for developers | JetBrains: Developer Tools for Professionals and Teams

Vscode快速配置(1)之基础工具_第3张图片

然后在VScode设置文件里(可以通过GUI界面修改,但本文章统一以setting.json修改)指定下面基础设置:

"editor.fontSize": 16, /* 字体大小 */
"editor.lineHeight": 24, /* 字体的高度,即一行的高度 */
"editor.fontFamily": "JetBrains Mono", /* 字体类型,这种是开源字体,更适合代码 */

三个关键的参数,指定了字体大小,行高,字体类型。不同设备上同样的字体显示效果不一样,所以具体的字体大小根据自己感觉来,行高可以高一些,这样不会显得密密麻麻的全是字了。

3.1 显示空白字符等

这里的空白字符就是强调的Tab和WhiteSpace,不仅仅是用多少个WhiteSpace显示Tab,必须明确知道当前的空白字符是Tab还是WhiteSpace。

除了空白字符,还可以高亮显示当前选中行,控制尾部空白字符属性等等,如下:

"editor.renderLineHighlight": "all", 	/* 高量显示选中行一行所有内容 */
"editor.renderControlCharacters": true, /* 显示控制字符 */
"editor.renderWhitespace": "all", 		/* 显示空白字符 */
"editor.detectIndentation": false, 		/* 关掉自动检测缩进功能,强制使用空格缩进 */
"editor.tabSize": 4, 					/* 默认Tabs大小为4个空白字符,用于显示Tab字符 */
"editor.wordWrap": "wordWrapColumn", 	/* 自动换行开启,在指定列数目换行 */
"editor.wordWrapColumn": 100, 			/* 超过100列就自动换行 */
"files.eol": "\n", 						/* 显示指定使用LR(\n)换行 */
"files.trimTrailingWhitespace": true, 	/* 去除尾部多余空白字符 */
"files.insertFinalNewline": true, 		/* 文件末尾插入新行,避免部分系统报错 */
"files.autoSave": "onFocusChange", 		/* 自动保存功能开启(切换界面后就保存) */
"files.encoding": "utf8", 				/* 显示指定文本编码 */

一般来说,文本编辑器最重要几点如下:

  • 固定文本编码模式,避免不同编码模式造成的问题。
  • 固定使用Whitespace,避免tab键在不同设备上解释不一致。
  • 一行尾部的空白字符应该去除。
  • 文件尾部应该有newline,避免不同系统间不兼容。
  • 开启自动保存,避免工作成果突然消失。
  • 指定行末的换行符为固定格式,避免混用。
  • 强化显示空白字符、Tab字符、控制字符等不可见字符。

默认的Vscode显示空白字符是淡淡的灰色,不太好辨认,因此这里推荐改成更加明显的其他颜色

"workbench.colorCustomizations": {
    "editorWhitespace.foreground": "#00d0d0",       /* 空白字符的前景色,青色 */
    "tab.activeForeground": "#f0f000",              /* 选项卡的文件名颜色,金黄色 */
    "editorLineNumber.activeForeground": "#00e0e0", /* 选中行的行号数字颜色,亮青色 */
},

显示效果如下,箭头是Tab键,圆点是WhiteSpace:
Vscode快速配置(1)之基础工具_第4张图片

4. 代码拼写检查

很多时候,书写英文时,难免会拼错一些单词,久而久之就会造成很多不良的影响,因此非常有必要使用工具检查常见的单词拼写情况。推荐使用下面的工具进行检查:

  • Code Spell Checker - Visual Studio Marketplace

如果拼写错误,那么就会在错误的单词下面出现波浪线,提示这里存在问题。

该工具默认下载后,支持英文的拼写检查,并且涵盖主流的编程语言源文件,由于词典的限制,会存在部分词汇无法识别错误的情况,可以通过添加单词到词典中,或者忽略来解决。

该工具会对常见的特殊拼写进行拆分后再进行检查,其规则如下:

  • camelCase会拆分成camel case来检查,因此驼峰命名法不会出错。
  • HTMLInput会拆分成html input,能识别这种专有大写名词+小写动词的组合。
  • snake_case_words会拆分成snake case words,因此下划线命名可以正常工作。
  • camel2snake会拆分成camel snake,自动忽略2

对于一些特殊的s/ing/ies/es/ed会被认为是前面大写单词的一部分。

  • CURLs -> curls – trailing s
  • CURLedRequest -> curled request – trailing ed

Code Spell Checker有以下注意事项:

  • 大小写不敏感,无法识别大小写错误。
  • 词典里面的单词不一定都是正确的,因此需要注意区分。
  • 小于等于3个字母的单词不会进行拼写检查,apple_cnt拆分后apple cntcnt不会参与拼写检查。
  • 所有标点符号都会被忽略。

该工具可在注释里使用cSpell:disable等等语句来开启、关闭指定功能的单词检查,不推荐这么做,因为这只是单词检查。

推荐做法是在.vscode里面放置cspell.json,根据实际情况来指定code spell checker的功能,此外也可以在vscode setting.json 文件里设置。

该工具支持自定义词典,可指定不同文件类型检测不同的词典等等功能,但一般编程使用不到。

主要设置有以下几类:

  • disable – 关闭检查。
  • enable – 开启检查。
  • ignore – 指定哪些单词需要被忽略掉,不用报错。
  • words – 指定一些被认为是正确的单词,并且会出现在建议列表中。
  • ignoreRegExp – 正则匹配,匹配的文本不会进行拼写检查。
  • includeRegExp – 正则匹配,匹配到的文本会进行检查,优先级小于ignoreRegExp
  • enableCompoundWords 允许单词连写,如errormessage

Code spell checker会提供一个建议列表,其中单词会用来在quick fix中使用,将鼠标移到错误单词的波浪线下,即可出现quick fix,然后点击该选项,即可出现建议的正确拼写单词列表

参考配置文件如下(部分配置字段):

/* code spell checker configuration file */
{
    /* Version of the setting file.  Always 0.2 */
    "version": "0.2",
    /* language - current active spelling language */
    "language": "en",
    /* Enable / Disable the spell checker. */
    "enabled": true,
    /* Specify file types to spell check. */
    "enabledLanguageIds": [
        "c",
        "python",
        "cpp",
        "shell",
        "json",
        "jsonc",
        "markdown",
        "plaintext"
    ],
    /* Controls the maximum number of spelling errors per document. */
    "maxNumberOfProblems": 10000,
    /* The maximum number of times the same word can be flagged as an error in a file. */
    "maxDuplicateProblems": 999,
    /* Controls the number of suggestions shown. */
    "numSuggestions": 8,
    /* The minimum length of a word before checking it against a dictionary. */
    "minWordLength": 4,
    /* Enable / Disable compound words like 'errormessage' */
    "allowCompoundWords": false,
    /* Specify paths/files to ignore. */
    "ignorePaths": [
        ".vscode",    /* Ignore vscode configuration files. */
        ".git",       /* Ignore the .git directory. */
        "*.o",        /* Ignore all .o files */
        "*.dll",      /* Ignore all .dll files. */
        "**/*.dll"    /* Ignore all .dll files */
    ],
    /* Words to be ignored and not suggested. */
    "ignoreWords": [
        "behaviour"
    ],
    "userWords": [
        "MCONFIG" /* Mconfig's macro */
    ],
    /* words - list of words to be always considered correct */
    "words": [
        "mkdirp",
        "tsmerge",
        "githubusercontent",
        "streetsidesoftware",
        "vsmarketplacebadge",
        "visualstudio"
    ],
    /* flagWords - list of words to be always considered incorrect */
    /* This is useful for offensive words and common spelling errors.*/
    /* For example "hte" should be "the" */
    "flagWords": [
        "hte"
    ],
    /* Determines if words must match case and accent rules.*/
    /*- `false` - Case is ignored and accents can be missing on the entire word. */
    /* Incorrect accents or partially missing accents will be marked as incorrect. */
    /*- `true` - Case and accents are enforced. */
    "caseSensitive": false,
    /* Tells the spell checker to load `.gitignore` files */
    /* and skip files that match the globs in the `.gitignore` files found. */
    "useGitignore": true
    /* Predefined exclude patterns */
    /* (1) Urls1 -- Matches urls */
    /* (2) HexValues -- Matches common hex format like #aaa, 0xfeef, \u0134 */
    /* (3) EscapeCharacters1 -- matches special characters: \n, \t etc. */
    /* (4) Base641 -- matches base64 blocks of text longer than 40 characters. */
    /* (5) Email -- matches most email addresses. */
    /* Predefined include Patterns */
    /* (1) Everything1 -- By default we match an entire document and remove the excludes. */
    /* (2) string -- This matches common string formats like '...', "...", and `...` */
    /* (3) CStyleComment -- These are C Style comments / * * / and / / */
    /* (4) PhpHereDoc -- This matches PHPHereDoc strings. */
}

5. 标签工具

推荐安装以下的标签类工具,让工作变得更简单:

  • vscode-icons - Visual Studio Marketplace,官方图标库,可以将文件目录按照不同的类型添加图标。
  • TODO Highlight - Visual Studio Marketplace,在文件中打上标签,可供后续快速查阅。
  • Todo Tree - Visual Studio Marketplace,除了能加上标签之外,还可以在边栏中以树状结构浏览。

现在一般TODO Highlight和TODO tree使用一个就行,也可两个都使用。

Vscode快速配置(1)之基础工具_第5张图片

本人更喜欢能够以树状结构呈现的todo tree,可以在设置文件里根据喜好来设立一些自己的标签。

"todo-tree.general.tags": [
    "plan:",
    "done:",
    "note:",
    "doing:",
    "error:",
    "bug:",
    "warn:",
    "question:",
],
"todo-tree.regex.regexCaseSensitive": false,
"todo-tree.highlights.customHighlight": {
    "done:": {
        "overviewRulerColour":"yellow",
        //"type":"tag",
        "foreground":"#010101",
        "background": "#339933",
        "icon": "check",
        //"cursor":"pointer",
        //"rulerColour": "yellow",
        "iconColour": "#339933",
        "isWholeLine":  true ,
        //"border":"4px solid red",
        "borderRadius":"4px",
    },
    "error:": {
        "foreground":"#050505",
        "background": "#cc0033",
        "icon": "eye",
        "iconColour": "#cc0033",
        "borderRadius":"4px",
    },

    "plan:": {
        "foreground":"#202020",
        "background": "#3399cc",
        "icon": "book",
        "iconColour": "#3399cc",
        "borderRadius":"4px",
    },
    "warn:": {
        "foreground":"#ffffff",
        "background": "#F26363",
        "icon": "info",
        "iconColour": "#F26363",
        "borderRadius":"4px",
    },
    "bug:": {
        "foreground":"#990066",
        "background": "#ff9933",
        "icon": "bug",
        "iconColour": "#ff9933",
        "borderRadius":"4px",
    },
    "doing:": {
        "foreground":"#330033",
        "background": "#FF33cc",
        "icon": "location",
        "iconColour": "#FF33cc",
        "borderRadius":"4px",
    },
    "note:": {
        "foreground":"#330033",
        "background": "#99cc00",
        "icon": "tag",
        "iconColour": "#99cc00",
        "borderRadius":"4px",
    },
    "question:": {
        "foreground":"#330033",
        "background": "#FF6600",
        "icon": "question",
        "iconColour": "#FF6600",
        "borderRadius":"4px",
    }
}

6. Git类工具

这类工具很多,可以根据需要选择,如下面插件:

  • GitLens — Git supercharged - Visual Studio Marketplace,必备Git插件,提供增强的GUI操作能力。
  • Git Graph - Visual Studio Marketplace,可以可视化查看存储库,支持GUI操作。
  • Git History - Visual Studio Marketplace,用于查看Git日志和文件记录,比较不同分支和提交。
  • GitLab Workflow - Visual Studio Marketplace,可以查看gitlab的MR等信息,其他平台如github等也有相应的插件。

这些插件的使用可参考官网,功能特性很多,更新也快。目前使用还不熟练,后面熟练了,就可以尝试总结一下了。

7. 辅助类工具

辅助类工具可提供一些额外的功能,帮助我们更好的使用VScode:

  • Time Master - Visual Studio Marketplace,跟踪我们的编程活动,记录各类数据,本地化运行,不会泄露隐私。
  • VS Code Counter - Visual Studio Marketplace,可以统计代码的组成,如纯代码、空白行、注释行的数量。
  • koroFileHeader - Visual Studio Marketplace,可以自动加入头部信息,形成统一和快捷的编码习惯。

除了FileHeader需要额外设置一下外,其他两个下载直接使用即可。

时间格式改一下,

"dateFormat": "YYYY-MM-DD HH:MM",

fileheader的头部注释定制,放入自己想要的信息即可,ctrl + win + i 快速生成头部注释

"fileheader.customMade": {
        "Author":"Once day",
        "Date": "Do not edit", // 设置后默认设置文件生成时间
        "LastEditTime": "Do not edit", // 设置后,保存文件更改默认更新最后编辑时间
        "custom_string_obkoro1": "Encoder=utf-8,Tabsize=4,Eol=\\r\\n.",
        "custom_string_obkoro2": "Email:[email protected]"
    },

你可能感兴趣的:(VScode++++,vscode,git)