本文正在参加「金石计划」
笔录
重拾老朋友系统 windows ,有种既熟悉又新鲜的感觉,还记得当时一直在吐槽windows配置前端所需要的环境变量繁琐无趣,后面换了一台新的苹果系统,那种只需通过命令行即可安装和配置玩你所需要的环境变量; 当然现在用也很爽,但是公司给你的标配就是windows,如果不想用自己的电脑,那就得接受windows。
接着就是重新安装前端各种所需要的环境,之前都是胡乱安装和下载一些不必要的插件和环境,比如只安装node最新版本,而无法兼容低版本的 vue2 代码,其实最好的选择是用 nvm 切换版本可以上下兼容,只是其中一个例子,下面对自己在window环境配置和代码开发中所遇到的坑洼,以及提高开发效率的小工具做个知识分享,有不完善之处,给些小建议呀😄
一、开发环境
NVM
在公司的新旧项目中需要使用到不同的 node 版本进行开发,通过 nvm 可以实现直接下载nodejs、随时切换nodejs版本,大大减轻了前端程序员切换nodejs版本的时间成本
在nvm下载之前,如果原本电脑中已经安装过了 node.js,首先需要卸载并删除干净,然后检查环境变量,如果>还有node.js,请去掉,保证系统已经无任何node.js残留
nvm下载网址:github.com/coreybutler…
1.进入nvm下载地址,下载nvm-setup安装包
2. 最后掌握四步命令,其余可自行查询
1.安装指定版本的node `nvm install` 版本号
2.查询看看已安装的nodejs版本 `nvm list`
3.使用指定版本的node.js `nvm use` 版本号
4.显示当前版本 `nvm current`
3. 如果window系统没有识别出nvm命令,需要进一步配置系统环境变量,如图
最后小结:
我们通过nvm命令下载指定版本的nodeJS都会到这个目录
当我们通过nvm所切换的npm版本下,下载cnpm会被安装到这个位置:
如果直接在window命令行输入cnpm -v可能会遇到如下情况:
无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚本。 经查,原因:现用执行策略是 Restricted(默认设置)
解决办法:
1.win+X键,使用管理员身份运行power shell
2.输入命令:set-executionpolicy remotesigned
3.输入”Y“,回车,问题解决
Git配置
关于这部分的内容,我就不在多做介绍了,可以看看往期内容
二、开发工具
Snipaste截屏工具
Snipaste 是一个简单但强大的截图工具,也可以让你将截图贴回到屏幕上!下载并打开 Snipaste,按下
F1 来开始截图,再按 F3,截图就在桌面置顶显示了。就这么简单!
还可以将剪贴板里的文字或者颜色信息转化为图片窗口,并且将它们进行缩放、旋转、翻转、设为半透明,甚至让鼠标能穿透它们 。
Snipaste 使用很简单,但同时也有一些较高级的用法可以进一步提升你的工作效率。感兴趣的话,请抽空读一读用户手册。
Snipaste 是免费软件,它也很安全,没有广告、不会扫描你的硬盘、更不会上传用户数据,它只做它应该做的事。
自从同事给我介绍了这款软件,就爱不释手,可以同时截取多个片段代码,让我可以对比参考,或者寻找问题,大大提高了工作效率
本文正在参加「金石计划」
VSCode插件系列
GitLens
在每行代码的末尾,GitLens 都会公开最后一次提交的作者、提交的时间以及其他详细的备注信息。状态栏的备注显示类似的信息。将鼠标悬停在这些注释上将显示有关每行提交历史记录的更多详细信息
通过 CodeLens 查看 Git Authorship
在每个文件的顶部和每个代码块的开头,GitLens 公开了最近的提交和作者数量。它通过利用 CodeLens(VS Code 中最强大的工具之一)来实现此目的,它提供了可单击的链接,公开了提交详细信息,并允许您从快速选择菜单中进行选择,以比较、导航和进一步探索每个提交。
轻松浏览修订历史记录
只需单击一个按钮,您就可以在任何文件的历史记录中来回导航。比较随时间推移而发生的变化,并查看整个文件或每行代码的修订历史记录。可自定义且不显眼的Git责备注释仍然显示在每一行上,告诉您最后一次提交的作者,日期和消息! 这也是我为什么喜欢他的利用哈哈,如图
vscode-author-generator
在文件顶部生成自定义作者信息的工具。
特征
支持多种模板,目前支持js、css、html/htm文件类型。
支持自定义信息, author name, email, dateinfo 目前支持。
添加cmd+u键绑定以进行快速更新。
用法使用前
Preferences->Settings添加您自己的设置
author-generator.author作者姓名,将[author]在您的*.tpl文件中##### 替换
author-generator.email. 作者电子邮件,将[email]在您的*.tpl文件中替换
author-generator.dateFormat将更改您的日期格式(默认格式为YYYY-MM-DD HH:mm:ss)
author-generator.updateOnSave设置true为在保存时触发 updateInfo,只有*.tpl模板文件存在时才会触发