Visual Studio Code 插件推荐

发表于 2019-05-15 更新于 2024-11-24 分类于开发工具阅读次数： 1.8k 2 分钟

Visual Studio Code 插件推荐

by 草梅友仁

参考链接

前言

Visual Studio Code 是一个非常适合用来写前端的编辑器，虽然本体功能简单，但是有着丰富而强大的插件支持，这使得 Visual Studio Code 可以深度自定义，实现你的需求。

插件推荐

那么，下面我就根据自己的使用体验来推荐一些插件。

Auto Close Tag 自动补全 HTML / XML 标签
Auto rename tag 自动重命名配对的 HTML / XML 标签
Auto Complete Tag 前两个插件的整合包
Auto Import 自动导入依赖包
Better Comments 高亮注释
change-case 修改代码命名风格
Chinese (Simplified) Language Pack for Visual Studio Code 中文简体汉化插件，习惯英语界面的也可以不装，英语苦手当然是必备的
Color Highlight 会将颜色代码转换为对应的颜色显示出来，这段代码什么颜色一目了然
Document This 给代码添加注释
DotENV .env 文件支持和格式化
EditorConfig for VS Code 使 vscode 支持 .editorconfig 配置
ESLint 代码检查工具，用于代码风格的检查。团队合作必备
file-peek 可以方便的补全文件路径
Git Graph 可视化 git 分支和提交记录
HTML Snippets HTML 代码片段
Image Preview 在编辑器上显示图片缩略图
IntelliSense for CSS class names in HTML 在 html 文件中提示 css 名称
JavaScript (ES6) code snippets es6 代码块
JavaScript and TypeScript Nightly 启用最新的 Typescript 语法
Markdown All in One 编写 md 文件
Markdown Preview Enhanced 可以把 vscode 当初 md 编辑器来使用，附带预览功能
npm Intellisense 自动提示 npm 包路径
Path Intellisense 自动提示文件路径
Polacode 生成美化代码的图片
open-in-browser 给 vscode 加一个右键在默认浏览器打开的快捷键
One Dark Pro 暗色主题。安装了 One Dark Pro 插件后，可以一键将 VSCode 编辑器的颜色调整成暗色系，编码起来更加舒适。
Simple React Snippets React 代码片段
stylelint css、scss、less 格式化
Todo Tree 统一查看项目下标记为 TODO 的注释
Vetur 前端神器，涵盖语法提示到格式化所有功能。也是 vue 框架推荐的插件。
Volar 对 Vue3 + Typescript 进行了专门的优化，注意和 Vetur 功能冲突，装其中一个就好了。如果使用 Typescript 开发，则该插件能提供更多的 Typescript 信息，所以更推荐安装该插件。如果使用 JavaScript 开发，那么效果差不多，都可以
vscode-icons 可以让 vscode 中的文件管理的树目录显示图标，显示图标后会使得文件、文件夹更加明确功能
WakaTime 记录写代码的时间
YAML yml/yaml 格式文件提示

以上插件在 Visual Studio Code 直接搜索即可~

娱乐向插件推荐

以下插件偏向娱乐性，请在开发中慎用~

小霸王 小霸王是一款基于 vscode 的 nes 游戏插件，能让你在紧张的开发之余在 vscode 里发松身心。通过劳逸结合，提升开发效率。
- 请务必在闲暇时间使用本插件，若是上班摸鱼被发现，后果自负
cloudmusic 网易云音乐插件。在 vscode 中听音乐，实现了播放器的大部分功能。
- 本插件也请务必在闲暇时间使用~
- 注意，如果无法使用本插件例如插件初始化失败，请安装 Visual C++ 2017 后重试。
swimming VSCode 模拟写代码，划水，摸鱼神器
Rainbow Fart VSCode Rainbow Fart 是一个在你编程时持续夸你写的牛逼的扩展，可以根据代码关键字播放贴近代码意义的真人语音。

本文作者：草梅友仁
本文地址： https://blog.cmyr.ltd/archives/44a0df8f.html
版权声明：转载请注明出处！

如何三分钟将网站转换为 APP？

发表于 2019-05-15 更新于 2024-11-24 分类于应用开发阅读次数： 1.6k 1 分钟

如何三分钟将网站转换为 APP？

by 草梅友仁

前言

现在用前端技术来写一个 app 实在是太方便了，尤其是有像 HBuilder（现已更名为 HBuilderX，功能一样）能将原生 H5 打包成原生 APP 的软件，那就更加方便了。

下面我们就来看看，如何在三分钟之内将你的网站转换为 APP。

【本案例以草梅友仁自己的个人网站https://www.caomeiyouren.cn/为例】

0.首先

首先，你肯定得先做好一个网站，也已经适配好了手机。但毕竟只是一个网站，还要通过手机浏览器来访问，有点不方便，如果能打包成 app 岂不美哉？【如图，已经做好了手机适配】

1.使用 HBuilder 新建移动 App 工程

先用 HBuilder 建一个空的移动 App 工程

2.在 index.html 页面添加如下代码

<script type="text/javascript">
    window.location.href = "https://www.caomeiyouren.cn/#/index";
    //这段代码的意思是跳转到指定网页
</script>

3.配置 App 信息

4.发行打包

5.下载 app 到手机试用

效果可以说是非常完美了！

6.优化用户体验

但是这个时候又会遇到新的问题了。

用户一旦按了手机的物理退出键，会触发 app 的默认退出事件，也就是说这个 app 就直接退出了

解决方案如下，在你的网站首页添加这样一段代码。请注意，是你的网站首页！

本段示例仅适用于单页面应用。多页面应用需要每个页面都有这么一段。

同时为了避免在首页还会返回原来页面的 bug，建议通过路由来判断是否为首页

<script>
    /* 解决App端物理返回键的问题 */
    document.addEventListener('plusready', function () {
        var webview = plus.webview.currentWebview();
        plus.key.addEventListener('backbutton', function () {
            webview.canBack(function (e) {
                //通过哈希路由来判断是否为首页，是首页则按返回键退出。避免退出后还会返回原来页面的BUG
                if (e.canBack && location.hash !== "#/index") {
                    webview.back();//返回上一个页面
                } else {
                    //首页返回键处理
                    //处理逻辑：1秒内，连续两次按返回键，则退出应用；
                    var first = null;
                    plus.key.addEventListener('backbutton', function () {
                        //首次按键，提示‘再按一次退出应用’
                        if (!first) {
                            first = new Date().getTime();
                            plus.nativeUI.toast('再按一次退出应用');
                            setTimeout(function () {
                                first = null;
                            }, 1000);
                        } else {
                            if (new Date().getTime() - first < 1500) {
                                plus.runtime.quit();
                            }
                        }
                    }, false);
                }
            })
        });
    });
</script>

本文作者：草梅友仁
本文地址： https://blog.cmyr.ltd/archives/a7652497.html
版权声明：转载请注明出处！

编程常用工具推荐

发表于 2019-05-14 更新于 2024-11-24 分类于编程阅读次数： 777 1 分钟

编程常用工具推荐

by 草梅友仁

前言

正所谓“工欲善其事必先利其器”，有一个好用的工具可以让我们写代码事半功倍，下面草梅就基于自己的使用体验来给大家推荐一些工具

编辑器

Visual Studio Code 前端神器，一个超好用的多语言编辑器，有着丰富多样的插件。不过插件安太多了也会有些卡顿。
- 官网：https://code.visualstudio.com/
- 插件推荐列表：
  - VSCode 必装的 10 个高效开发插件
  - vscode 好用的插件
Notepad++ 一个代替记事本的编辑器，当只是想临时打开文件看看时，可以用它。
- 官网：https://notepad-plus-plus.org
Typora 一个非常好用的 makedown 文件编辑器，本人现在写的文档都是用这个写的。
- 官网：<https://typora.io/
- 其他推荐：用 Markdown 写作用什么文本编辑器？

远程工具

Xftp 6 连接 Linux 服务器，可视化管理文件。官网： https://www.netsarang.com
Xshell 6 连接 Linux 服务器，进行命令行操作。官网： <https://www.netsarang.com

数据库管理

SQLyog 可视化管理 MySQL。官网： https://www.webyog.com/
Robo 3T 可视化管理 MongoDB。官网：https://robomongo.org/

其他

HBuilderX 不是很推荐拿来写代码，我只是用来打包 H5App 的。官网： https://www.dcloud.io/hbuilderx.html

最后

这些好用的工具基本上都是外网的，访问可能有些慢。建议优先从官方下载，官方下载不到的再去百度找别的版本

本文作者：草梅友仁
本文地址： https://blog.cmyr.ltd/archives/b3b22e84.html
版权声明：转载请注明出处！

为什么选择 node.js

发表于 2019-05-13 更新于 2024-11-24 分类于 Node.js 阅读次数： 1.4k 1 分钟

为什么选择 node.js

参考教程 https://www.runoob.com/nodejs/nodejs-tutorial.html

简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台。
Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境，基于 Google 的 V8 引擎，V8 引擎执行 Javascript 的速度非常快，性能非常好。

——by 菜鸟教程

node.js 的牛逼之处就在于能让 JavaScript 离开浏览器环境，独立运行。因此也能用于后端。

参考链接：https://www.zhihu.com/question/20986058/answer/16825178

比较一下目前流行的几个后端语言：Java, PHP, nodejs, Ruby (on Rails), Python：

客观来讲，Java 拥有最完整的生态链，目前基于 Java 的框架，应用非常多，语言本身上手也比较容易。学习 Java 的话，至少将来 5-10 年找工作是不成问题。但是我个人非常不喜欢 Java，主要原因可能确实不太了解 Java，在为数不多对 Java 的印象就是“慢”和“Heavy”（我学生时代写过 jsp 的东西，也不同一窍不通）

Nodejs：事件驱动+异步 IO 让 nodejs 最擅长低 CPU 运算、多 IO、高并发的 Web service。Javascript 本身就是基于原型的语言，想要真正精通，难度比其余稍微大一点（如果你现在对 js 掌握就非常好，就不用担心这个了）。nodejs 变态的事件驱动对于代码的维护也是一个挑战，当然这些都是可以靠牛逼的编程能力克服的。除开语言本身的问题，nodejs 最大的毛病还是目前 npm 里面的包都不太成熟，应用于生产环境稍微有点不稳定。

选择 JavaScript，只是个人认为，js 比其他语言来说，更加简单一些。不过，也正是因为 js 的语法太过灵活，在代码质量上就需要加以注意了。JavaScript 不像 java 一样有着完善的异常处理机制，一旦出现异常会导致整个程序退出，因此，一旦要注意单元测试和异常捕捉。

另外还有个参考如何评价阿里开源的企业级 Node.js 框架 EggJS？

阿里是业界最早的一批使用 Node.js 来做线上大流量应用的公司，
早在 2011 年的就已经开始在生产环境中使用。

众所周知，在阿里的技术栈中， Java 是最最核心的，那 Node.js 扮演怎么样的一个角色呢？

基础设施大部分采用 Java 实现，变化较少，有事务要求的 Business Services 通常使用 Java。

而 Node.js 则替代过去 PHP/Java Web 的场景，用在需要快速迭代，需求变化非常快的用户侧。

很多内部的工程化支撑系统也逐渐基于 Node.js 了。

简单的说就是 node.js 也有大厂实际应用，性上其实也是完全可靠的

总结

但最后也要说一句，学习什么语言并不重要，js 也只是其中一种而已。

在菜鸟教程的服务端教程中，一共有 Java、PHP、nodejs、 Ruby、 Python、Go 等语言教程。这些语言都可用于后端，选择一个学习即可。

本人将基于 node.js 学习中遇到的各种困难/坑/问题来写一些经验和心得

本文作者：草梅友仁
本文地址： https://blog.cmyr.ltd/archives/8be71ee0.html
版权声明：转载请注明出处！

版本号的规范

发表于 2019-05-13 更新于 2024-11-24 分类于编程阅读次数： 2k 2 分钟

版本号的规范

语义化版本号规范链接：https://semver.org/lang/zh-CN/

参考链接：https://blog.csdn.net/u012107143/article/details/78731272
https://blog.csdn.net/qq_38880380/article/details/79319126

整理：草梅友仁

注：草梅在整理的过程中发现两篇文章还是有较大差异的，不过意思是差不多的，只要理解一下就行。

前言

版本号是一个很重要的东西。搞明白版本号问题，对于开发者和用户都有很大的帮助

对开发者
- 版本号的命名和更新问题，是开发者的责任感和前瞻性的问题，一个规范的版本号，能够帮助用户正确理解你开发的程序，以及优化用户体验
对用户
- 明白版本号规范之后，就能找到对应的教程和文档，才不至于在使用中摸不着头脑

另外也要说一句，IT 界日新月异，网上的资料很有可能已经是过时的，因此，在找到时间较早、距离现在时间已经比较久的资料时，一定要注意版本号问题。

版本号规范

版本格式：主版本号.子版本号.阶段版本号，版本号递增规则如下：

主版本号：全盘重构时增加；重大功能或方向改变时增加；大范围不兼容时增加；当产生了严重影响项目的修改时增加。
子版本号：增加新的业务功能，并且向下兼容的更新时增加
阶段版本号：一般是 Bug 修复或是一些小的变动，要经常发布修订版，时间间隔不限，修复一个严重的 bug 即可发布一个修订版。修复 BUG、以及一些细节上的更新时增加（没有产生新业务功能，仅在原来的上面修订时都可以增加）

也可以在三位的基础上再加一位日期版本号和希腊字母版本号
- 日期版本号:用于记录修改项目的当前日期，每天对项目的修改都需要更改日期版本号。此版本号由开发人员决定是否修改。（例如 20190513）

希腊字母版本号:此版本号用于标注当前版本的软件处于哪个开发阶段，当软件进入到另一个阶段时需要修改此版本号。此版本号由项目决定是否修改。希腊字母版本号共有 5 种，分别为：base、alpha、beta、RC、release。(例如：4.0.0_beta)
- α（Alpha）版：内测版。此版本表示该软件在此阶段主要是以实现软件功能为主，通常只在软件开发者内部交流，或者专业测试人员测试用，一般而言，该版本软件的 Bug 较多，需要继续修改。
- β（Beta）版：公测版。该版本相对于α版已有了很大的改进，消除了严重的错误，但还是存在着一些缺陷，需要经过多次测试来进一步消除，此版本主要的修改对像是软件的 UI，供专业爱好者大规模测试用。
- RC 版：是 Release Candidate 的缩写，意思是发布倒计时，候选版本，该版本已经相当成熟了，完成全部功能并清除大部分的 BUG，基本上不存在导致错误的 BUG，与即将发行的正式版相差无几。
- Release 版：该版本意味“最终版本”，在前面版本的一系列测试版之后，终归会有一个正式版本，是最终交付用户使用的一个版本。该版本有时也称为标准版。一般情况下，Release 不会以单词形式出现在软件封面上，取而代之的是符号(R)。

除此之外
- 先行版本号(Pre-release)：意味该版本不稳定，可能存在兼容性问题。其格式为：X.Y.Z.[a-c][正整数]，如 1.0.0.a1，1.0.0.b99，1.0.0.c1000。
- 开发版本号：常用于 CI-CD（持续集成和持续交付）。格式为 X.Y.Z-dev[正整数]，如 1.0.1-dev4。
- 版本号的排序规则为依次比较主版本号、次版本号和修订号的数值，如 1.0.0 < 1.0.1 < 1.1.1 < 2.0.0；对于先行版本号和开发版本号，有：1.0.0.a100 < 1.0.0，2.1.0-dev3 < 2.1.0；当存在字母时，以 ASCII 的排序来比较，如 1.0.0.a1 < 1.0.0.b1。

后记

草梅之所以会如此在意版本号的问题，也是因为在版本号上栽过跟头。

之前在开发的时候还没注意过版本号的规范，于是就想当然的来了，结果就发现自己的版本号命名是不符合规范的，造成什么误解也是不奇怪的。

而作为用户，要举的例子就是 webpack 这个前端打包神器。目前它的版本已经到了 4.x，而我在网上找的教程、别人写的博客等都还是 3.x 的，遇到问题也是因为版本号不同。从 3.x 到 4.x，显然其中是有不兼容更新的，不然它也没必要增加一位主版本号。

而且作为一个工具，webpack 上还有很多插件，显然，当 webpack 更新时，这些插件也得跟着更，其中有一个插件就是”extract-text-webpack-plugin”，直接下载的话它是 3.x 版本，不支持 webpack4.x 版本，只能指定版本号为 4.0.0-beta.0 才行

所以一定要再三注意版本号问题！

本文作者：草梅友仁
本文地址： https://blog.cmyr.ltd/archives/898ef2bd.html
版权声明：转载请注明出处！

草梅友仁的博客