环境配置

1.chrome下载

https://www.google.cn/chrome/index.html

下载完后默认是google搜索，会导致不能访问网站，修改为bing搜索

点击浏览器右上方三点>设置>搜索引擎>bing

2.vscode下载

http://vscode.cdn.azure.cn/stable/78a4c91400152c0f27ba4d363eb56d2835f9903a/VSCodeUserSetup-x64-1.52.1.exe

左下角>设置>settings.json

复制以下配置，ctrl+s后会自动校验格式，需要下载eslint

{"explorer.confirmDragAndDrop": false,"window.zoomLevel": 0,"explorer.compactFolders": false,"background.customImages": ["file:///D:/public/images/vs.png" //图片的路径],"background.style": {"width": "100%","height": "100%","z-index": "99999","background.repeat": "no-repeat", //是否重复"background-size": "30%,20%", //图片大小"opacity": 0.1 //透明度},"background.useFront": true,"background.useDefault": false,"less.compile": {"outExt": ".wxss"},"autoprefixer.browsers": ["> 1%","last 2 versions","not ie <= 8","ios >= 8","android >= 4.0"],// 通过tab直接生成标签名,可以说是非常的好用"emmet.triggerExpansionOnTab": true,"emmet.includeLanguages": {"wxml": "html","javascript": "javascriptreact"// 用于支持react的jsx写法},"minapp-vscode.disableAutoConfig": true,"[less]": {"editor.defaultFormatter": "HookyQR.beautify"},"[html]": {"editor.defaultFormatter": "HookyQR.beautify"},"explorer.confirmDelete": false,"[javascriptreact]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[javascript]": {"editor.defaultFormatter": "vscode.typescript-language-features"},"javascript.updateImportsOnFileMove.enabled": "always","terminal.integrated.shell.linux": "","workbench.editorAssociations": [{"viewType": "jupyter.notebook.ipynb","filenamePattern": "*.ipynb"}],"[typescript]": {"editor.defaultFormatter": "vscode.typescript-language-features"},"[vue]": {"editor.defaultFormatter": "octref.vetur"},// 每次保存自动格式化"editor.formatOnSave": true,// 每次保存的时候将代码按eslint格式进行修复"editor.codeActionsOnSave": {"source.fixAll.eslint": true},// vetur格式化配置"vetur.format.defaultFormatter.html": "js-beautify-html","vetur.format.options.tabSize": 4,"vetur.format.defaultFormatterOptions": {"js-beautify-html": {"wrap_attributes": "auto"}},"vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化"javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 函数前加上空格 只有在默认vetur的时候生效// json文件默认格式化方式prettier"[json]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},// css文件默认格式化方式prettier"[css]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},//关闭快速预览"editor.minimap.enabled": false,//使用主题"workbench.colorTheme": "greenery",// 字体大小"editor.fontSize": 14,// 控制折行方式 - "on" (根据视区宽度折行)"editor.wordWrap": "on","editor.tabSize": 2, // 换行默认以tab缩进 2个字符"editor.colorDecorators": false, // 控制编辑器是否显示内联颜色修饰器和颜色选取器。"editor.snippetSuggestions": "top", // 将建议的代码段优先级提前选择，比如输入for第一个提示是for循环代码段。"files.associations": {"*.cjson": "jsonc","*.wxss": "css","*.wxs": "javascript",// 文件关联语言的优先级配置"*.vue": "vue","*.cshtml": "html","*.js": "javascript","*.dwt": "html"},"editor.fontLigatures": null,"workbench.editor.enablePreview": false,"files.autoGuessEncoding": true// 根本不生效 还是要配置到prettier.config.js//"prettier.singleQuote": true,//"prettier.semi": false
}

插件配置

1.Chinese 中文插件

2.ESLint 格式校验插件

3.Vetur vue辅助插件

4.Live Server 热加载页面插件

5.quokka 特别推荐，可以直接运行js的插件，用于一些js逻辑的测试

6.ES7 React/Redux/GraphQL/React-Native snippets 快捷输出react语句的插件 vue也有不少用得上

7.Bracket Pair Colorizer 彩虹色括号匹配插件，体验效果非常好

8.Indent Rainbow 彩虹色缩进，搭配Bracket Pair Colorizer，项目变成彩虹色

9.Auto Close Tag和Auto Rename Tag 前者自动闭合标签，后者修改标签会同步对应闭合标签

10.会了吧自动检索代码中英文代词，边敲代码边学英语

3.HBuilderx下载

https://www.dcloud.io/hbuilderx.html

官网下载，最新版本，解压后点击解压后的文件夹中HBuilderx.exe打开

4.Typora下载

https://typora.io

markdown笔记工具,可用于笔记，项目说明等

5.注册表配置

默认windows10右击没有以管理员运行，需要注册表配置，txt文件复制下面内容后修改为reg后缀并运行

Windows Registry Editor Version 5.00
[HKEY_CLASSES_ROOT\*\shell\runas]
[HKEY_CLASSES_ROOT\*\shell\runas]
@="\u7ba1\u7406\u5458\u53d6\u5f97\u6240\u6709\u6743"
"Icon"="C:\\Windows\\System32\\imageres.dll,-78"
"NoWorkingDirectory"=""
[HKEY_CLASSES_ROOT\*\shell\runas\command]
@="cmd.exe /c takeown /f \"%1\" && icacls \"%1\" /grant administrators:F"
"IsolatedCommand"="cmd.exe /c takeown /f \"%1\" && icacls \"%1\" /grant administrators:F"
[HKEY_CLASSES_ROOT\Directory\shell\runas]
[HKEY_CLASSES_ROOT\Directory\shell\runas]
@="\u7ba1\u7406\u5458\u53d6\u5f97\u6240\u6709\u6743"
"Icon"="C:\\Windows\\System32\\imageres.dll,-78"
"NoWorkingDirectory"=""
[HKEY_CLASSES_ROOT\Directory\shell\runas\command]
@="cmd.exe /c takeown /f \"%1\" /r /d y && icacls \"%1\" /grant administrators:F /t"
"IsolatedCommand"="cmd.exe /c takeown /f \"%1\" /r /d y && icacls \"%1\" /grant administrators:F /t"
[HKEY_CLASSES_ROOT\dllfile\shell]
[HKEY_CLASSES_ROOT\dllfile\shell\runas]
@="\u7ba1\u7406\u5458\u53d6\u5f97\u6240\u6709\u6743"
"HasLUAShield"=""
"NoWorkingDirectory"=""
[HKEY_CLASSES_ROOT\dllfile\shell\runas\command]
@="cmd.exe /c takeown /f \"%1\" && icacls \"%1\" /grant administrators:F"
"IsolatedCommand"="cmd.exe /c takeown /f \"%1\" && icacls \"%1\" /grant administrators:F"
[HKEY_CLASSES_ROOT\Drive\shell\runas]
[HKEY_CLASSES_ROOT\Drive\shell\runas]
@="\u7ba1\u7406\u5458\u53d6\u5f97\u6240\u6709\u6743"
"Icon"="C:\\Windows\\System32\\imageres.dll,-78"
"NoWorkingDirectory"=""
[HKEY_CLASSES_ROOT\Drive\shell\runas\command]
@="cmd.exe /c takeown /f \"%1\" /r /d y && icacls \"%1\" /grant administrators:F /t"
"IsolatedCommand"="cmd.exe /c takeown /f \"%1\" /r /d y && icacls \"%1\" /grant administrators:F /t"

6.nvm下载

node版本管理工具

https://github.com/coreybutler/nvm-windows/releases

选择[nvm-setup.zip]下载，一路点点点安装

下载完成后进行nvm配置淘宝镜像，提高下载速度

cmd输入

nvm node_mirror https://npm.taobao.org/mirrors/node/
nvm npm_mirror https://npm.taobao.org/mirrors/npm/

nvm安装成功会自动配置环境变量，直接使用指令即可

nvm ls
nvm install [node版本号]
nvm uninstall [node版本号]
nvm use [node版本号]

nvm install [node版本号] 并且nvm use [node版本号]

node -v 出现 [node版本号] 说明node也配置成功

7.git安装

https://git-scm.com

点击download,点击setup文件点点点完事

cmd输入git出现相应信息安装成功

8.yarn安装

类似npm，比npm的bug更少

npm install -g yarn
yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
yarn add moduleName
yarn remove modeleName

9.vue-cli安装

npm i -g @vue/cli

前端上班第一天-开发环境配置相关推荐

第一部分开发环境配置
一.Python3的安装安装包下载及相关文档介绍.相关连接如下. 官方网站:https://www.python.org/ 下载地址:https://www.python.org/downloads ...
python爬虫第一课开发环境配置
一.Python3的安装二.请求库的安装 1.requests的安装直接pip安装:pip3 install requests 2.Selenium的安装 selenium是一个自动测试化工具,利 ...
前端实习日记——前端开发环境配置清单
前端实习日记--前端开发环境配置清单实习日记篇说明: 作为前端小菜鸟,初入职场实习,希望将所感所获简单总结,分享给同样处于新手期的小伙伴们,和大家共同成长~ 实习第一步:配环境! 实习第一天,自然是 ...
第一节：ASP.NET开发环境配置
第一节:ASP.NET开发环境配置什么是ASP.NET,学这个可以做什么,学习这些有什么内容? ASP.NET是微软公司推出的WEB开发技术. 2002年,推出第一个版本,先后推出ASP.NET2. ...
第一篇Mac上fluter开发环境配置
第一篇Mac上fluter开发环境配置一.安装Xcode 二.安装Android studio 1.下载并安装[下载android studio](https://developer.android ...
第一讲：ESP32-IDF+VSCode开发环境配置
第一讲:ESP32-IDF+VSCode开发环境配置文章目录第一讲:ESP32-IDF+VSCode开发环境配置 1.1写进ESP32芯片的二进制程序的生成方式 1.2ESP32-IDF+VSCo ...
React + Typescript + Webpack 开发环境配置
对于复杂或多人开发的 React 项目来说,管理和使用每个组件的 props . state 或许会成为一件让人头痛的事情,而为每一个组件写文档,成本也会比较大,对项目的开发效率也不是最理想的. Ty ...
开发环境配置--Ubuntu+Qt4+OpenCV（三）
同系列文章 1. 开发环境配置--Ubuntu+Qt4+OpenCV(一) 2. 开发环境配置--Ubuntu+Qt4+OpenCV(二) 3. 开发环境配置--Ubuntu+Qt4+OpenCV(三 ...
树莓派Raspberry Pico RP2040 开发环境配置完全缝合终极版C-SDK
树莓派Raspberry Pico RP2040 开发环境配置骨灰版总览目录树莓派Raspberry Pico RP2040 开发环境配置骨灰版前置说明 0.1 关于调试使用的Debugger ...

前端上班第一天-开发环境配置