最近刚买了新的mbp，白纸一样的宝贝当然需要好好勾画一下了，由于本人从事前端开发相关工作，每次换新电脑都要在网上查找开发环境搭建的一些文章，包括vscode的插件，item2的配色方案，以及github的ssh配置。今天刚搭建完环境，趁热打铁写篇总结，省的下次再需要搭建环境还要百度。
- vscoded及插件安装
vscode下载地址,直接下载安装。
由于直接下载安装的vscode是英文版本的，如果不习惯可以在应用商店里面搜索chinese插件安装，就会成文中文版本的vscode了。是不是很方便哇。
vscode安装的插件有：
Auto Close Tag 自动闭合HTML标签
Auto Rename Tag 修改HTML标签时，自动修改匹配的标签
Bracket Pair Colorizer 2**！它为代码中的各种结对的括号提供了颜色高亮等功能，有了它你再也不用对着编辑器数括号了。
HTML CSS Support html css 代码自动补全
HTML Snippetshtml 代码片段补全
JavaScript (ES6) code snippets ES6的代码片段
jQuery Code Snippetsjquery的代码片段
open in browser允许直接在浏览器中打开当前文件，这个看情况安装，我一般是本地起服务
veturVetur支持.vue文件的语法高亮显示，除了支持template模板以外，还支持大多数主流的前端开发脚本和插件
ESLint 代码规范和错误检查。关于eslint的配置，我只设置了针对vue文件的配置。vscode里打开 文件>首选项 > 设置， 在用户设置setting.json里面：可以这样设置
{
//配置eslint
"eslint.autoFixOnSave": true,
"files.autoSave":"off",
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
{ "language": "vue", "autoFix": true }
],
"eslint.options": {
"plugins": ["html"]
},
//为了符合eslint的两个空格间隔原则
"editor.tabSize": 2
}
//如果还想设置其他规则 请自行百度 我对这方面也不是太了解.
以上关于eslint配置参考在Vue.js项目中，使用的是eslint检查
- item2的下载及安装
iterm2的下载地址
关于iterm的配色方案，可以使用iterm的自带的配色，在iterm2>preference>profiles>colors>color presets 里面选择。如果想要使用其他配色方案，在color presets 下拉框里面有import 可以导入其他配色方案。我选择的是iterm2官方提供的，官方下载地址,下载好了之后在打开color presets 使用import导入
image.png
，我使用的是Solarized dark higher contrast。 大家看个人喜好选择。参考自 Mac 下iterm2配色方案（高亮）及显示分支
在需要iterm2的时候用快捷键呼出来，在不需要的时候让其退下的设置方式iterms>preference>keys左侧 Hotkey 选项 勾选 Show/hide iTerm2 with a system-wide hotkey
并且可以在 Hotkey 文本框处 设置一个你喜欢的全局快捷键 .
mac 下 使用 iterm2 配置及快键键使用
- git的下载及安装
git 下载地址 - 更改镜像源,使用npm,需要安装node.js 这个就不介绍了，去官网直接下载就好了
//这样有助于下载速度，有些服务器可能是国外的，用了淘宝镜像源之后可以加快下载安装速度
npm config set registry https://registry.npm.taobao.org/
//如果不想使用淘宝镜像源了
npm config delete registry
- 为github添加ssh
cd ~/.ssh //检查是否存在id_rsa.pub
//如果已经存在id_rsa.pub，执行
cat id_rsa.pub //复制里面的内容 添加到github里面
//如果不存在 则执行如下命令生成
ssh-keygen -t rsa -C "用户名@gmail.com" //在这个过程后会让你选择公钥和私钥的存储路径 如果你在根路径下生成的 直接回车就行 然后在根路径下执行
ls -a 命令 找到 id_rsa.pub
查看文件，复制内容添加到github就行了。
网友评论