快速搭建前端环境

408 阅读3分钟

「本文已参与好文召集令活动,点击查看:后端、大前端双赛道投稿,2万元奖池等你挑战!

环境安装

当然不是普通的环境搭建方式,而是敲三五行代码(或者是复制粘贴)就可以搞定的那种安装。

社区中经过不懈的努力有过两种快速安装环境的工具 Scoop & Chocolatey,这节课,我就来稍微聊一聊 Chocolatey

WinGet 作为微软官方出品还需观望。

Chocolatey的使用

安装

在 powershell (右键开始菜单)中执行下面的程序就可以了

Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

注:必需要管理员权限才能进行安装。否则报一大堆错

命令行用法

安装 node.js

choco install nodejs 
choco install nvm

一行代码搞定前端全家桶!

choco install -y googlechrome firefox git vscode nodejs-lts nvm.portable sourcetree

注:安装的 firefox 是国际版的,不是中国版,同一个帐户下两个版本之间数据无法共享

并且我是windows系统的,我是这么用的,mac系统。。。我也没这个系统啊

不仅仅是前端全家桶

安装 python 全家桶!

choco install -y git tortoisegit vscode python
refreshenv
python -m pip install --upgrade pip
# 中国教育网用户切换镜像
# pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple
pip install pipenv

还可以搜索软件

choco search nodejs

VS code

快捷键

工欲善其事,必先利其器,来吧,同学们,我们再来看看 VS code 这个强大的工具都有哪些快捷键。

  • ctrl + / :为选中的所有整行添加注释
  • alt+上/下:移动整行内容
  • shift + alt +上/下:复制当前选中的行
  • ctrl + enter:直接切换到下一行,不用再用鼠标点点点
  • ctrl + ~ :呼出vs code命令行
  • ctrl + / :为所选区域添加注释
  • shift + alt +a:为所选区域添加注释,这个快捷键和微信的截图 alt+a 冲突

插件

  • Chinese(simplified)功能和名字一样,提供中文的操作界面
  • vetur 使 vue 代码的高亮,应该是内置了 prettier,所以也提供了格式化代码工具
  • Material Icon Theme 提供各式各样的图标,用来美化和区分不同类型的文件
  • node-snippets 快速生成 node 代码块
  • bracket Pair Colorizer2 使相同的括号颜色相同,更易于区分代码(第一版好像已经停止维护了)
  • Live Server 小型服务器架构,让代码在虚拟的服务器上运行(好像也已经停止更新了)
  • ESlint 控制代码规范,对代码进行格式化处理

慎用插件

应用名称插件功能
小霸王小霸王游戏机
超级鼓励师加油,你是最棒的,年薪百万就在前方。
韭菜盒子/vscode-stocks看股票走势
电影集看电影,刷剧
daily-anime喜欢二次元,喜欢动漫,番剧的更新。
read-vscode-e/Thief-Book/网易云阅读,可以一边敲代码一边看小说。
vsc-netease-music可以听音乐,好像音乐本身感知不强,意义也不大。
vscode-maxPlus浏览游戏资讯。
vscode-leetcode刷算法。
Zhihu On VScode刷知乎。
fakeupdate模仿各种电脑系统。
LeetCode刷算法
NBA real-time score看NBA数据。