前端工具VScode+NodeJs+Git下载配置
下载vscode需要用到node.js和git
一、安装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 Files\nodejs，默认情况下会安装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
三、安装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开发者必备。
image.png
2.vscode-icons
资源目录加上图标，增加不同文件类型辨识度，必备
image.png
3.Beautify
代码格式化
image.png
4.Auto Close Tag
自动闭合HTML标签
image.png
5.ESLint
javascript代码检测工具，可以配置每次保存时格式化js，但每次保存只格式化一点点，得连续按住Ctrl+s才可以
image.png
6.Prettier - Code formatter
只关注格式化，并不具有eslint检查语法等能力，只关心格式化文件(最大长度、混合标签和空格、引用样式等)，包括JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown
image.png
7.minapp
支持微信小程序标签、属性的智能补全
image.png
8.GitLens
可以查看代码提交记录
image.png
image.png
9.Code Runner
可以单独运行JS文件，在JS代码页面鼠标右键点击Run Code，即可输出JS运行结果
image.png
10.Easy LESS
平时开发写css比较麻烦，可以安装此插件，在目录中新建less文件进行开发，保存的时候自动回生成一个同名css文件，这样开发就方便多了，记得html引用的时候要引用css文件
image.png
11.cssrem
image.png
点击图示按钮，选择配置拓展设置，然后在Root Font Size设置基础值.例如ui设计图为750px，想要使用 vw将页面100等分，则1px=0.133rem即 (100/750)，在使用的时候写10px时则会自动计算出1.3rem
image.png
可以自动根据px计算出对应的rem值，安装完此插件，及得重启vscode！否则不生效！
image.png
【后续继续补充插件】
3.创建用户代码片段(vue)
文件—>首选项—>用户代码片段, 然后再弹出的输入框中输入vue，然后回车(Enter)
在vue.json中写上代码片段,代码如下
{
"vue-template": {
"prefix": "vue",
"body": [
"<template>",
" <div class='${TM_FILENAME_BASE}'>",
" </div>",
"</template>",
"",
"<script>",
"export default {",
" name: '',",
" data () {",
" return {",
" }",
" },",
" created () { // 实例被创建之后执行代码",
"",
"\t},",
" computed: { // 计算属性",
"",
"\t},",
" components: { // 组件的引用",
"",
"\t},",
" methods: { // 方法",
"",
"\t},",
" mounted () { // 页面进入时加载内容",
"",
"\t},",
" watch: { // 监测变化",
"",
"\t}",
"}",
"</script>",
"",
"<style scoped lang='scss'>",
"",
"</style>"
],
"description": "my vue template"
}
}
使用的时候输入vue，会自动提示，按下回车键就可以快速生成预先定义的代码片段了
预先定义的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": "\r\n",
"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 的代码格式化
