web前端开发工具支持及环境搭建

1、node安装

1.1 环境变量

下载网址：下载 | Node.js 中文网

下好包点击安装直接下一步默认安装即可，如果不想装在C盘的话需要配置环境变量

win+i 打开设置面板搜索框输入环境变量

最后把nodejs所在文件的路径复制到环境变量中

打开cmd窗口输入node -v 查看版本号是否安装成功

1.2 npm 换源

全局安装 npm install -g npm

查看全局镜像npm get registry

更新全局镜像（切换淘宝源）npm config set registry http://registry./

2、vscode

下载网址：Visual Studio Code - Code Editing. Redefined

插件安装

2.1 Prettier - Code formatter

解决所有代码格式问题的优选方案

2.2 Eslint

提供一个插件化的javascript代码检测工具

2.3Vetur

vue2版本开发插件，支持

语法高亮SnippetEmmet错误检测格式化智能感知....

2.4Auto Rename Tag

自动重命名 HTML或XML 标签

2.5Auto Close Tag

自动添加 HTML/XML 关闭标签

2.6Path Intellisense

智能路径提示

2.7Turbo Console Log

快速添加 console.log 信息，js debug 必备

快捷键 ctrl + alt + l 选中变量之后，使用这个快捷键生成 console.log

alt + shift + c 注释所有 console.log

alt + shift + u 启用所有 console.log

alt + shift + d 删除所有 console.log

2.8css-auto-prefix

CSS兼容主流浏览器

2.9CSS Peek

查看 css 定义

2.10Regex Previewer

预览正则表达式效果

2.11Codelf

给变量起名的神器

2.12Intellicode

这个插件旨在帮助开发人员提供智能的代码完成建议而构建的，并且已预先构建了对多种编程语言的支持,使用机器学习技术来观察和查找众多开源GitHub项目中使用的模式，并在编码时提供建议

2.13JavaScript (ES6) Code Snippets

一些非常有用的JavaScript代码片段

2.14Live Server

本地服务器,鼠标右键启动

2.15Comment Translate

选中自动翻译

2.16Google Translate

输入中文，选中之后按快捷键秒翻译为英文，速度很快，而且不与上个插件冲突

3、webpack起步 | webpack 中文文档

npm install webpack webpack-cli --save-dev

4、vue cli创建一个项目 | Vue CLI

npm install -g @vue/cli

5、版本管理

根据实际公司要求安装

5.1 gitGit - Downloads

GIT属于分布式控制系统

5.2 svnDownloads · TortoiseSVN

SVN属于集中式控制系统

6、Chorme Google Chrome 网络浏览器

更好体验的开发者工具

7、PostmanDownload Postman | Get Started for Free

前后端联调接口测试工具

8、FoxmailFoxmail for Mac

邮箱管理

9、Wps officeWPS Office-支持多人在线编辑多种文档格式_WPS官方网站

10、Axure RPAxure RP - UX Prototypes, Specifications, and Diagrams in One Tool

快速原型设计工具，可以做出很多交互效果，直接通过拖拽画出原型、生成网页。

前端可查看原型，根据需求完成功能

11、TIMTIM

同步QQ与WeChat功能，支持云文件、邮件收发、截屏贴图等功能

12、有道词典网易有道

英语不好可截屏翻译