windows搭建前端开发环境

奶茶九月，我换了一份工作，在离开时也就丢下了自己曾掏了7000大洋换过屏幕的mac Book Pro aaron特制版。
新公司用thinkCentre 台式机开发，有幸抽到window10系统，隔壁同学是window7（坑更多）

入职已经第四天了，基本上就是在搭建开发环境和熟悉项目（项目代码好复杂）

抽空产出一篇文章，记录一下我和我的新宠磨合期问题…（前端还用搭环境 囧？）

台式机组装

• 领回来主机、显示器、 鼠标 、键盘
• 在自己工位接上线儿
• 擦一擦灰~

开机建账号

• 如果是公司有各种权限自己不会弄，一定要问明白
• 我因为建立账户的时候选错权限耽误了很长时间
• 最好建立管理员权限账户，自己用着方便，也能避免很多问题。

软件安装与配置

• 谷歌浏览器(放弃IE 尽管你是edge)

  • 最新版本，有用着顺手的插件就安排上
  • 再次推荐一个插件安装文章
  • 导入书签库（顺手存书签是个好习惯）
  • 如果不能fq就默认百度搜索引擎吧

• Git(把Git bash当作终端用)

  • 装好git 做一个 alias别名配置吧，既装逼又便捷

  • $ git config --global alias.co checkout
    $ git config --global alias.br branch
    $ git config --global alias.ci commit
    $ git config --global alias.st status
    

• git bash 中的复制粘贴 ctrl+ins shift+ins

• node（npm）

  • 最新版本node 无脑 next 安装

• vscode

  • vscode 其实挺温顺的，装好后可以自己补充各种插件来完善功能
  • window如果出现 终端空白，请软件右键点击属性，关闭兼容模式
  • 文末送个vscode的setting.json 设置，保存自动格式化代码、好看主题、字体合适（需要配合安装相应插件）

• 企业微信

  • 非钉钉即wxWork

• wps

  • 如果没有office的话

软件安装用你说？谁不会下载，配置呢？ 听我的，选好自己的系统位数，都默认C盘下载就好，前端真的不用配置环境变量了，省事省心费内存。再有问题 www.baidu.com 大多数坑前辈已经帮踩了。

个性化

• 我是个极简主义的洁癖强迫症，就默认window10窗口背景图+原谅绿主题色是我的个性化了
• 给你的计算机重新命名~ 重启生效

小skill

• window10 开机默认关闭数字键盘，这逼死强迫症，修改方法如下
  • 注册表：计算机\HKEY_USERS.DEFAULT\Control Panel\Keyboard
  • “InitialKeyboardIndicators”项目将2147483648数值修改为80000002
  • 重启（这个方法不好用。。。。）
• 常用快捷键：锁屏：win+L 打开此电脑：win+E 切换视图：alt+tab 搜索内容：win+Q
• 我不知道了，太多了记不住，我还是个萌新。。。

拉取项目

• 配置好SSH，不懂百度吧
• 第一次在终端 git clone 拉代码会有个安全警告，记得输入”yes“ 不是回车…
• 入坑看代码ing

水文一篇纪念我的 再见 你好

{
     
  "extensions.ignoreRecommendations": true,
  "workbench.colorTheme": "Monokai Dimmed",
  "editor.fontSize": 13,
  "workbench.startupEditor": "welcomePage",
  "editor.formatOnSave": true,
  "window.zoomLevel": 1,
  "files.associations": {
     
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  "emmet.includeLanguages": {
     
    "wxml": "html"
  },
  "minapp-vscode.disableAutoConfig": true,
  "editor.renameOnType": true,
  "emmet.excludeLanguages": ["markdown"],
  "editor.suggestSelection": "first",
  "diffEditor.ignoreTrimWhitespace": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
     
    "js-beautify-html": {
     
      "wrap_line_length": 120,
      "wrap_attributes": "auto",
      "end_with_newline": false
      // "wrap_attributes": "force-aligned"
    },
    "prettyhtml": {
     
      "printWidth": 100,
      "singleQuote": false,
      "wrapAttributes": true,
      "sortAttributes": false
    }
  },
  "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe"
}
(插件名：Auto Rename Tag、Color Info、 Color Picker、 ESlint、filesize、 Git History、 Docker、Gitlens... 、 HTML CSS Support、 HTML Snippets、 HTML Hint、Image preview JavaScript code snippets、 markdownlint、 minapp、npm open in browser、 Prettier Vetur Vue2snippets)