前台工具VScode+NodeJs+Git下载配置

  • 时间:2020-11-08 01:27 作者:回到唐朝做IT 来源: 阅读:12
  • 扫一扫,手机访问
摘要:下载vscode需要用到node.js和git一、安装NodeJs1.下载NodejsNode.js官网下载地址:https://nodejs.org/en/download/tips:脚本语言需要一个解析器才能运行,JavaScript是脚本语言,在不同的位置有不一样的解析器,如写入html的js

下载vscode需要用到node.js和git

一、安装NodeJs

1.下载Nodejs

Node.js官网下载地址:https://nodejs.org/en/download/

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.pngimage.png

9.Code Runner
可以单独运行JS文件,在JS代码页面鼠标右键点击Run Code,就可输出JS运行结果

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.settings.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}
  • 全部评论(0)
最新发布的资讯信息
【系统环境|windows】Axios 取消重复请求(2020-11-08 07:00)
【系统环境|windows】熬了一晚上,小白用Python写了一个股票提示系统(2020-11-08 07:00)
【系统环境|windows】2020要想成为一名专业的web前台开发程序员,需要学习什么?(2020-11-08 06:35)
【系统环境|windows】前台面试每日 3+1 —— 第546天(2020-11-08 06:34)
【系统环境|windows】聊聊前台工程师的职业发展 (纯干货)(2020-11-08 06:34)
【系统环境|windows】浅谈OAuth 2.0基本原理(2020-11-08 06:34)
【系统环境|windows】程序员初入职场避坑指南(2020-11-08 06:34)
【系统环境|windows】python的绘图利器--海龟绘图turtle(2020-11-08 06:33)
【系统环境|windows】pyinstaller打包结果瘦身(2020-11-08 06:33)
【系统环境|windows】前台面试每日 3+1 —— 第518天(2020-11-08 06:33)
手机二维码手机访问领取大礼包
返回顶部