windows搭建前端开发环境

偏执的太偏执、 2022-12-10 05:56 218阅读 0赞

> 奶茶九月，我换了一份工作，在离开时也就丢下了自己曾掏了7000大洋换过屏幕的mac Book Pro aaron特制版。  
> 新公司用thinkCentre 台式机开发，有幸抽到window10系统，隔壁同学是window7（坑更多）
> 
> 入职已经第四天了，基本上就是在搭建开发环境和熟悉项目（项目代码好复杂）
> 
> 抽空产出一篇文章，记录一下我和我的新宠磨合期问题…（前端还用搭环境 囧？）

#### 台式机组装 ####

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

#### 开机建账号 ####

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

#### 软件安装与配置 ####

*  谷歌浏览器(放弃IE 尽管你是edge)
    
     *  最新版本，有用着顺手的插件就安排上
     *  [再次推荐一个插件安装文章][Link 1]
     *  导入书签库（顺手存书签是个好习惯）
     *  如果不能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)

[Link 1]: https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247485719&idx=1&sn=53b9a2ea1e07e9934606cdeeccb21ffd&chksm=fa2be9fecd5c60e895f4c30645c1a4b790cab86045f234f3c5ab6902767ddb32f557c2b78e40&mpshare=1&scene=24&srcid=&sharer_sharetime=1593310747699&sharer_shareid=0b2f3a22ec3bf4d5b710ba6254a2baac&key=644b115416bee241b3ce202fcfab769af7935add0c5bb215718a8e4b6fabcc7974416bdb4859e71e32b55b64d829fe8bc6b74cf6263f4df989db5ebbb540ec82ab66b9e607dd7aba22c4e19a268df01e3328dddf7ab09281bbb71a7b2717f71fe9d3afd1b2a824dccce570712d93e1df5d56c66bb7a34bf7432e9337de77f78b&ascene=14&uin=MjUzMzU0MDUwNQ%3D%3D&devicetype=Windows+10+x64&version=62090538&lang=zh_CN&exportkey=A6ZZerhxYDbk5SdLWyQvths%3D&pass_ticket=rbIQAE1UlopwaujEWqarerQtJmiWTPd5SNM2h1x4h7QcsdHFHnefxSwb7V94uAYc&wx_header=0