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

环境配置

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