[开发工具]把VSCode当作记事本使用

把VSCode当作记事本使用

“Wednesday July 14 2021 10:35:06 GMT+0800 (China Standard Time)”

结论

讲vscode的5个设置、3个代码模板、十几个快捷键、语法高亮插件和格式美化插件；
本文不仅仅讲vscode，本文还说了一些心得体会；
vscode不仅仅是文本编辑器，vscode代表先进编程方法论的前进方向；

introduction

纯文本文件

文字文本、文档文件在办公中的地位用不着我多说；
与文件对立的概念是云计算、云存储，腾讯云的出现导致我在手机文件系统中找不到在QQ下载的文件，呵呵我一点也不愤怒；
文档是纯文本文件的扩展，比如word、excel、ppt、pdf、html；
文本文件的编码，最古老的摩尔斯电码跟计算机文件无关，ASCII编码只支持英语（共128个），ISO-8859-1编码在ASCII的基础上增加了法语、德语等（只有256个字符），我们的汉字用GB-2312（即GBK，GB 国标 国家标准）编码，世界标准不是ISO而是Unicode UTF-8编码；
文本文件的保存，推荐utf-8编码，文件名由大小写字母、数字、下划线组成，文件名的第一个字符是字母；word、excel、ppt保存为开源的odt、odx、odp格式，odt文件跟docx文件一模一样，只不过odt文件格式是完全免费开放的；
文本文件的编辑，推荐visual studio code软件，自动保存、模板字符串、快捷键；
文本文件的分析，推荐用python3编程处理字符串，使用python3的re（正则表达式）模块；

utf-8

我们的汉字至少有上千个字符，GB-2312（即GBK）编码在ASCII的基础上增加了汉字、增加了汉语标点符号、增加了全角英文字符（ASCII里面的半角英文字符ABC才是标准的正统，全角ＡＢＣ是盗版的）、没有增加日语等外语字符；总共256256=65535个字符，但有很多宁可保留不用也不增加印度语等外语字符。
问题：不同编码下128个ASCII字符一定能正常显示吗，在什么条件下某一种编码的ASCII字符能跨编码正常显示；
在中国，Windows10（美国人发明）操作系统文件默认的ANSI编码是GB-2312，Internet（欧洲人发明）上很多文件的编码是ISO-8859-1，再加上后来居上的UTF-8编码。三大文本文件编码都有广阔的市场，但互不兼容，导致了文件乱码问题，我属于Unicode UTF-8阵营。
现在最流行的编码是Unicode/UTF-8，英法德俄中日韩西葡意印阿希、甚至非洲人和印第安人的古文字都有，Unicode理论上有256的四次方=4G约40亿个字符，(256256256256)/(365243600) = 136.2够你看136年。utf-8的缺点是编码不规则、占更多内存。

vscode

vscode是一款高级的记事本，只能对纯文本文件 创建、编辑、保存、打开、修改、另存为；
在官网https://code.visualstudio.com/ 下载，如果下载很慢则右击复制下载链接https://az764295.vo.msecnd.net/stable/2aeda6b18e13c4f4f9edf6667158a6b8d408874b/VSCodeUserSetup-x64-1.58.1.exe，然后把“az764295.vo.msecnd.net”改成“vscode.cdn.azure.cn”镜像地址，即http://vscode.cdn.azure.cn/stable/2aeda6b18e13c4f4f9edf6667158a6b8d408874b/VSCodeUserSetup-x64-1.58.1.exe，下载速度从龟速直接起飞；

自动保存

在File>Preferences>Settings下面，搜索autosave，把Files: Auto Save设置为afterDelay，Files: Auto Save Delay的值为200表示每隔0.2秒会自动保存文件；
切换白色背景，在设置搜索color theme，设置"workbench.colorTheme": “Visual Studio Light”；
自动换行显示，搜索设置"editor.wordWrap": “on”；
如果没有行号，搜索设置"editor.lineNumbers": “on”；
字体，搜索设置"editor.fontFamily": "‘Fira Code’, Consolas, “，设置"editor.renderWhitespace”: "all"显示所有字符，搜索tab设置tab相关属性；

模板字符串

在File>Preferences>User snippets（以后很常用）下面点击new global snippets file，输入文件名global，在最外层{}里面添加新结点addTimestamp对应的body为[""$CURRENT_DAY_NAME $CURRENT_MONTH_NAME $CURRENT_DATE $CURRENT_YEAR $CURREN{T}_{H}OUR:$CURRENT_MINUTE:$CURRENT_SECOND GMT+0800 (China Standard Time)""]的时间戳；
<<< 代码块背景颜色就不能设置为白色吗！？

{
    // Place your global snippets here. Each snippet is defined under a snippet name and 
// 这是注释，无足轻重
    //  "description": "Log output to console"
    // }
// 这是时间戳
    "addTimestamp": {
        "scope": "",
        "prefix": "ts",  // ts：这是快捷键
        "body": [
            "\"$CURRENT_DAY_NAME $CURRENT_MONTH_NAME $CURRENT_DATE $CURRENT_YEAR $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND GMT+0800 (China Standard Time)\"",
        ],
        "description": "add time stamp"
    },
}

快捷键

在File>Preferences>Keyboard shortcuts，
Ctrl+N 在新标签页新建空白文件
Ctrl+Shift+N 打开新窗口
Ctrl+Tab 在当前窗口的标签页之间切换
Tab 代码补全，可以在File>Preferences>Settings下面搜索设置代码提示相关的属性
Ctrl+[ 减少代码块向右缩进，Shift+Tab减少缩进，Ctrl+] 缩进，Ctrl+/ 注释，Shift+Alt+F 格式化（需要安装对应插件），，
Ctrl+Shift+P 或按F1，俗称万能键
Ctrl+C 基本初等快捷键，Ctrl+F Ctrl+H Ctrl+V Ctrl+X Ctrl+A Ctrl+Z Ctrl+S Ctrl+Home Ctrl+End Ctrl+Plus
Alt+Down 有技术含量的快捷键，Alt+Down当前行下移 Shift+Alt+Down当前行向下复制 Ctrl+Enter在当前行下面插入空行 Ctrl+Alt+Down在相邻行相同位置同时编辑 Alt+Click在鼠标点击的所有位置同时编辑 Shift+Ctrl+End选择从当前到末尾

插件

python3、js、java、json、html、xml，格式化的插件，Shift+Alt+f美化代码格式；
语法高亮显示的插件；
代码提示插件，建议百度一下；
语言debug插件，繁，烦，首先还是要在本地安装配置所有的语言运行环境，然后安装每一种语言的vscode插件（一种语言可能要多个插件），如果安装配置完成后还不能在vscode运行代码，那么我也没法，因为我认为vscode是格式化代码、语法高亮显示、插入snippet的高级记事本；

编程

html

在vscode使用html5模板迅速创建保存html，在浏览器打开；

python3

自定义python3模板，参考附；
到python.org下载安装新版python3，在python3自带的"D:\python\Lib\idlelib\idle.bat"使用python3 shell；推荐安装和学习python3，但如果不想安装就算了；
python3在cmd用pip命令安装库，在https://pypi.org/ 查找库，但一定注意小心python2这个历史遗留问题，python2库不能用，python2代码不能用；

re

多少人debug到吐血，最终得到了血的教训，即这一句python代码：
Table 1 血的教训

>>> re.match('^\\s+$','\t\x0b\x0c\r\n \x20\xa0\u3000')
<re.Match object; span=(0, 9), match='\t\x0b\x0c\r\n  \xa0\u3000'>
>>> print('0x20:{\x20} 0xa0:{\xa0} 0x3000:{\u3000}')
0x20:{ } 0xa0:{ } 0x3000:{　}
>>> s = 'we'  #直接精确地报错算你好运，很多情况下编译器是疯疯癫癫的吐血三升的报错；
SyntaxError: invalid non-printable character U+00A0

代码 re.match(’^\s+$’,’\t\x0b\x0c\r\n \x20\xa0\u3000’) 的意思是：空格与不间断空格与全角空格都是空白符，他们看起来一样（0x20:{ } 0xa0:{ } 0x3000:{　}），但直接copy粘贴到代码里面会报错，因为不间断空格（0xa0）与全角空格（0x3000）是非法字符，编译器报语法错误；

Table 1 血的教训，JavaScript代码版

var patt = s = /^\s+$/g;
var str = 'AAA \r\n\t \x0b\x0c\x20\xa0\u3000 \u2660';
var res = patt.test(str.substring(3, str.length - 1));
res = `re.match('\\s+','${str.substr(1, str.length - 1 - 3)}') = ${res}`;
console.log(res);

附

附一，再啰嗦几句

推荐安装Microsoft Visual Studio Code，作为记事本使用；浏览器、文件夹、vscode都属于最经常使用的软件，建议pin to taskbar；
推荐安装python3，作为日常编程工具，python擅长处理字符串；
推荐学习re，正则表达式处理字符串；
推荐.txt第一原则，一切可掌控，推荐使用utf-8编码。

附二，global-code.snippets.json

双击打开：

{
    // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
    // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
    // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
    // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
    // Placeholders with the same ids are connected.
    // Example:
    // "Print to console": {
    //  "scope": "javascript,typescript",
    //  "prefix": "log",
    //  "body": [
    //      "console.log('$1');",
    //      "$2"
    //  ],
    //  "description": "Log output to console"
    // }

    // 这是时间戳
    "addTimestamp": {
        "scope": "",
        "prefix": "ts",
        "body": [
            "\"$CURRENT_DAY_NAME $CURRENT_MONTH_NAME $CURRENT_DATE $CURRENT_YEAR $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND GMT+0800 (China Standard Time)\"",
        ],
        "description": "add time stamp"
    },
    // 这是python3代码模板
    "template_py": {
        "prefix": "py",
        "body": [
            "#!/usr/bin/env python",
            "# -*-coding:utf-8 -*-",
            "# @Created on   : \"$CURRENT_DAY_NAME $CURRENT_MONTH_NAME $CURRENT_DATE $CURRENT_YEAR $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND GMT+0800 (China Standard Time)\"",
            "# @Author       : zorrow2017",
            "# @File         : fileUtils.py",
            "",
            "import re",
            "",
            "",
            "HELP='''",
            "#<<<comment: number",
            "'''",
            "",
            "def main():",
            "    print(HELP)",
            "",
            "",
            "if (__name__=='__main__'):",
            "    main()",
            "    input('ENTER to exit...')",
            ""
        ],
        "description": "python3 template"
    },
    // 这是html5代码模板
    "template_h5": {
        "prefix": "html",
        "body": [
            "<!DOCTYPE html>",
"<!--",
"@Created on  : \"$CURRENT_DAY_NAME $CURRENT_MONTH_NAME $CURRENT_DATE $CURRENT_YEAR $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND GMT+0800 (China Standard Time)\"",
"@Author      : zorrow2017",
"@Description : html模板",
"To change this license header, choose License Headers in Project Properties.",
"To change this template file, choose Tools | Templates and open the template in the editor.",
"-->",
"<html lang=\"zh-Hans-CN\">",
"",
"<head>",
"    <title>HTML模板</title>",
"    <meta charset=\"UTF-8\">",
"",
"    <script src=\"http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js\"></script> ",
"    <script type=\"text/javascript\">",
"        //初始化",
"        jQuery(function ($) {",
"            var patt = s = /^\\s+$/g;",
"            var str = 'A\\u2660a \\r\\n\\t \\x0b\\x0c\\x20\\xa0\\u3000 A';",
"            var res = patt.test(str.substring(3, str.length - 1));",
"            res = `re.match('\\s+','${str.substr(1, str.length - 1 - 3)}') = ${res}`;",
"            console.log(res);",
"        });",
"    </script>",
"",
"",
"    <style type=\"text/css\">",
"        main {",
"            /* margin: 上右下左 外边距; */",
"            margin: 10px 10px 20px 3%;",
"        }",
"    </style>",
"",
"    <meta name=\"description\" content=\"html模板\">",
"<meta name=\"keywords\" content=\"temp\"/>",
"",
"    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"</head>",
"",
"<body οnlοad=\"init()\">",
"    <noscript>",
"        <!-- 当浏览器不能解析js的时候显示noscript标签 -->",
"        <strong>We're sorry but vue-app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>",
"        <br />",
"        怎么连JavaScript都没有？",
"        <br /><br />",
"    </noscript>",
"",
"    <header></header>",
"",
"    <nav></nav>",
"",
"    <main>",
"        <h1>html模板</h1>",
"        <article>",
"            <h2>&lt;html lang=\"zh-Hans-CN\"&gt;</h2>",
"            <section>",
"                结论：lang=\"zh-Hans-CN\"<br />",
"            </section>",
"            <section>",
"                cc",
"            </section>",
"        </article>",
"    </main>",
"",
"    <footer>",
"        <!-- <script src=\"https://cdn.staticfile.org/jquery/1.10.0/jquery.js\"></script>  -->",
"    </footer>",
"</body>",
"",
"</html>",
        ],
        "description": "html5 template"
    },
    "java main template": {
        "prefix": "javat",
        "body": [
            "import java.util.*;",
"",
            "public class Test04{",
                "\tpublic static void main(String[] args) {",
                    "\t\tSystem.out.println();",
                    "\t}",
                    "",
"}",
""
        ],
        "description": "java main template"
    }
}