记新windows电脑打造前端开发环境流程

系统环境

  • 查看电脑配置(主要是CPU内存硬盘SSD这些),对于该配置能完成什么样的开发强度心里有数
  • 联网,设置固定IP(较推荐)
  • 清理已安装工具,取消不常用的任务栏(比如IE浏览器,应用商店)
  • 规划分区,明确每个分区盘的用处

工具下载

下载以下常用工具并安装

  • 7z
  • Chrome
  • VSCode
  • python
  • Git(VSCode安装后再安装),SourceTree(图形化Git管理),BeyondCompare(Diff对比工具)
  • NodeJs
  • yarn
  • Everything
  • Wox(Everything和python安装后再安装)
  • Cmder
  • Office工具
  • MacType(美化windows字体显示)
  • 迅雷极速版/FDM
  • IM工具 QQ 微信 钉钉
  • VirtualBox
  • 其它工具 坚果云 Zerotier-One
  • 从坚果云的同步文件中安装ssr并添加订阅地址

Chrome

前端开发浏览器是重头,所以要配置好浏览器的一些东西

  • ssr运行后登录chrome同步扩展程序,确保常用的vue-devtool Proxy SwitchSharp NIM(NodeJs调试管理工具) 划词翻译扩展已安装
  • 登录后等待同步书签
  • Proxy SwitchSharp导入坚果云同步的备份文件,并点击扩展图标选择自动模式,至此FQ已完成,后续可以科学上网
  • 设置 -> 下载内容 -> 下载前询问每个文件的保存位置 勾选上

Cmder

windows下如果要获得流畅的命令行使用体验,Cmder那是必备的工具,后续的命令行操作也是使用该工具执行,安装后需要做一些简单的设置,参考

  • 注册右键菜单 管理员身份打开cmd并cd到Cmder目录,执行Cmder.exe /REGISTER ALL
  • 设置启动目录 Settings -> Startup - > Task,修改{cmd::Cmder}项,把:
    cmd /k "%ConEmuDir%\..\init.bat"改为cmd /k "%ConEmuDir%\..\init.bat" -new_console:d:G:\workspace
  • 设置alias 打开Cmder安装目录下的config/user-aliases.cmd文件,添加常用的简写命令,比如

    1
    gc = git commit -am $1
  • 设置常用快捷键 在Settings -> Keys & Macro页面中搜索split,为split bottom设置快捷键Ctrl+Shift+D为split right设置快捷键Ctrl+D,保持和iTerm2一致。设置Minimize/Restore (Quake-style hotkey also)的快捷键为Ctrl+F1,这个可以用来快速显隐窗口。

Git

Git现在几乎成了主流的版本控制工具,在开发之前我们需要先对Git做个简单的配置

  • 配置Git

    1
    2
    git config --global user.name "erguotou"
    git config --global user.email erguotou525@gmail.com
  • 生成本地公私钥

    1
    2
    ssh-keygen -t rsa
    cat ~/.ssh/id_rsa.pub

    将生成的公钥复制到Github/Gitlab之类的仓库中。

  • 修改文件默认结尾格式
    1
    2
    git config core.eol lf
    git config core.autocrlf false

VSCode

目前来看最火的编辑器,速度比Atom快很多,使用前先安装几个常用的插件

  • EditorConfig for VS Code
  • ESLint
  • HTML Snippets
  • language-stylus
  • Path Intellisense
  • Prettier
  • Vetur

然后修改创建文件的默认结尾为LF,在用户配置中加入"files.eol": "\n"

NodeJs

前端开发必备,主要是换源,安装常用全局模块

1
2
3
npm i -g nrm http-server
nrm use taobao
yarn config set registry 'https://registry.npm.taobao.org'

Everything & Wox

类似Mac上的Alfred,配置简单,主要是改下快捷键为Ctrl+~

高级玩法

  • AutoHotKey AHK为windows用户提供了更多的可能,开发时可以用它定义快捷输入、执行自动化操作,可以定义开机自启动脚本,显隐应用窗口等等
  • MacType Windows的ClearType字体很多时候看着都很难受,这时我们需要MacType来优化字体显示,可以参考这个做个自定义优化或者直接使用Candy改的MacType
分享到