一、安装NodeJs
1.下载Nodejs
Node.js官网下载地址:https://nodejs.org/en/download/
Node.js历史版本下载地址：https://nodejs.org/zh-cn/download/releases/
tips:脚本语言需要一个解析器才能运行，
javascript
是脚本语言，在不同的位置有不一样的解析器，如写入html的js语言，浏览器是它的解析器角色。而对于需要独立运行的JS，nodejs就是一个解析器。
2.安装
安装的时候除了安装的路径修改为非系统盘外，其他默认。我安装到D:Program Filesnodejs，默认情况下会安装
npm
(Node Package Manager)，是一个项目依赖库的管理工具。
3.检测是否安装成功
打开命令行或者在vscode里“终端新建终端”，在终端输入命令
node -v //会输出当前node的安装版本
npm -v //会输出当前npm的安装版本
二、安装Git
实际项目开发中，我们经常会用一些版本控制器来托管自己的代码
git官网下载地址:https://git-scm.com/downloads
可视化代码提交工具(小章鱼)
GitKraken 客户端:https://www.gitkraken.com/download
多分支提交步骤：
1.个人分支commit(push)
2.切换到master主分支pull
3.主分支meger到个人分支(如果没有错误)
4.个人分支meger到主分支
5.主分支push
Git常用命令和常见问题
三、安装VScode
VSCode一款免费
开源
的现代化轻量级代码编辑器，
前端
开发一大利器。
vscode官网下载地址:https://code.visualstudio.com/
1.设置中文语言
-使用快捷键【Ctrl+Shift+P】，弹出的搜索框中输入【configure language】
-然后选择搜索出来的【Configure Display Language】，locale的属性值为“zh-CN”
-安装插件名为【Chinese (Simplified)Language Pack for Visual Studio Code】
-重启VSCode软件生效。
2.插件列表
1.Vetur
vue
多功能集成插件，包括：语法高亮，智能提示，Vue开发者必备。
2.vscode-icons
资源目录加上图标，增加不同文件类型辨识度，必备
3.Beautify
代码格式化
4.Auto Close Tag
自动闭合HTML标签
5.ESLint
javascript代码检测工具，可以配置每次保存时格式化js，但每次保存只格式化一点点，得连续按住Ctrl+s才可以
6.Prettier – Code formatter
只关注格式化，并不具有eslint检查语法等能力，只关心格式化文件(最大长度、混合标签和空格、引用样式等)，包括JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown
7.minapp
支持
微信小程序
标签、属性的智能补全
8.GitLens
可以查看代码提交记录
9.Code Runner
可以单独运行JS文件，在JS代码页面鼠标右键点击Run Code，即可输出JS运行结果
10.Easy LESS
平时开发写
css
比较麻烦，可以安装此插件，在目录中新建
less文件
进行开发，保存的时候自动回生成一个同名
css文件
，这样开发就方便多了，记得
html
引用的时候要引用
css文件
11.cssrem
点击图示按钮，选择
配置拓展设置
，然后在
Root Font Size
设置基础值.例如ui设计图为750px，想要使用
vw
将页面100等分，则
1px=0.133rem
即
(100/750)
，在使用的时候写
10px
时则会自动计算出
1.3rem
可以自动根据px计算出对应的rem值，安装完此插件，及得重启vscode！否则不生效！
【后续继续补充插件】
3.创建用户代码片段(vue)
文件—>首选项—>用户代码片段, 然后再弹出的输入框中输入vue，然后回车(Enter)
在
vue.js
on中写上代码片段,代码如下
{
"vue-template": {
"prefix": "vue",
"body": [
"
",
"
",
"
",
"
",
"",
""
],
"description": "my vue template"
}
}
使用的时候输入vue，会自动提示，按下回车键就可以快速生成预先定义的代码片段了
注意：此处配置了sass，所以在style中定义了lang=‘scss’，要是不使用scss，可以在vue.json文件中去掉即可。
vue项目sass-loader安装可参考:vue项目sass-loader安装
用户代码片段可参考好基友文章:使用vs code创建vue/
HTML5
-vue代码片段
4.1settings.json中配置(一)(配置用户代码片段时也可以使用)
{
"update.mode": "manual",
"editor.formatOnSave": true, // #每次保存的时候是否自动格式化
"editor.fontSize": 14,
"editor.fontFamily": "Consolas, 'Courier New', monospace",
"editor.fontWeight": "bold",
"editor.lineHeight": 18,
"editor.letterSpacing": 0,
"editor.tabSize": 2, // 重新设定tabsize
"editor.insertSpaces": true,
"editor.detectIndentation": true,
"editor.wordWrap": "on",
"editor.renderLineHighlight": "gutter",
"editor.roundedSelection": true,
"editor.renderControlCharacters": true,
"editor.renderIndentGuides": true,
"editor.DragAndDrop": false,
"editor.minimap.showSlider": "mouSEOver",
"editor.minimap.renderCharacters": false,
"editor.minimap.maxColumn": 90,
"editor.cursorStyle": "line-thin",
"editor.cursorBlinking": "expand",
"editor.quickSuggestions": {
"strings": true
},
"window.titleBarStyle": "native",
"window.menuBarVisibility": "visible",
"window.zoomLevel": 0,
"window.title": "${rootName} - ${dirty}${activeEditorLong}",
"workbench.colorTheme": "Monokai",
"workbench.startupEditor": "welcomePage",
"workbench.activityBar.visible": true,
"workbench.statusBar.visible": true,
"workbench.sideBar.location": "left",
"workbench.editor.enablePreview": false,
"workbench.editor.tabSizing": "fit",
"workbench.colorCustomizations": {
// "statusBar.background": "#333333",
// "statusBar.foreground": "#adadad",
"terminal.background": "#000000",
"terminal.foreground": "#FFFFFF"
},
"breadcrumbs.enabled": false,
"breadcrumbs.symbolPath": "off",
"explorer.openEditors.visible": 0,
"files.encoding": "utf8",
"files.eol": "rn",
"files.hotExit": "onExit",
"files.autoSave": "off",
"extensions.autoUpdate": true,
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"wxml": "html"
},
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"javascript.implicitProjectConfig.experimentalDecorators": true,
//path
"git.path": "D:\Git\bin\git.exe",
"terminal.integrated.shell.windows": "C:\Windows\sysnative\cmd.exe",
//px to rem
"px-to-rem.px-per-rem": 75,
"px-to-rem.only-change-first-ocurrence": false,
"px-to-rem.number-of-decimals-digits": 10,
"px-to-rem.notify-if-no-changes": true,
//npm-scripts
"npm-scripts.showStartNotification": false,
//simpleIcons
"simpleIcons.hIDEArrows": false,
//vetur
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "auto" //force-aligned:保存格式化换行 auto:保存格式化不换行
},
"prettyhtml": {
"printWidth": 100,
"singleQuote": false,
"wrapAttributes": false,
"sortAttributes": false
}
},
"search.followSymlinks": false,
"workbench.iconTheme": "vscode-icons",
"eslint.autoFixOnSave": true, // #每次保存的时候将代码按eslint格式进行修复
"eslint.validate": [
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
},
{
"language": "javascript",
"autoFix": true
},
{
"language": "wpy",
"autoFix": true
}
],
"prettier.eslintIntegration": true, // #让prettier使用eslint的代码格式进行校验
"prettier.semi": false, //#是否显示代码最后一行的分号
"prettier.singleQuote": true, //#使用单引号替代双引号
"editor.formatOnType": true, //#让函数(名)和后面的括号之间加个空格
"files.associations": {
"*.wpy": "vue",
"*.cjson": "jsonc",
"*.wxss": "css",
"*.wxs": "javascript"
},
"minapp-vscode.disableAutoConfig": true,
"vetur.validation.template": false
}
4.2 settings.json中配置(二)
注： 此配置支持 CSS、HTML、JS 和 Vue 等文件的格式化。大家可以参考，然后结合自己的需求去配置。如果没有特殊需求，也可以拿去直接用
此配置文件需要安装以下几个vscode 扩展程序：ESLint 、Prettier – Code formatter、Vetur
{
// tab 大小为2个空格
"editor.tabSize": 2,
// 100 列后换行
"editor.wordWrapColumn": 100,
// 保存时格式化
"editor.formatOnSave": true,
// 开启 vscode 文件路径导航
"breadcrumbs.enabled": true,
// prettier 设置语句末尾不加分号
"prettier.semi": false,
// prettier 设置强制单引号
"prettier.singleQuote": true,
// 选择 vue 文件中 template 的格式化工具
"vetur.format.defaultFormatter.html": "prettyhtml",
// 显示 markdown 中英文切换时产生的特殊字符
"editor.renderControlCharacters": true,
// 设置 eslint 保存时自动修复
"eslint.autoFixOnSave": true,
// eslint 检测文件类型
"eslint.validate": [
"vue",
"html",
"javascript",
"typescript",
"javascriptreact",
"typescriptreact"
],
// vetur 的自定义设置
"vetur.format.defaultFormatterOptions": {
"prettier": {
"singleQuote": true,
"semi": false
}
}
}此配置参考：vscode 的代码格式化