下载 vscode 需要用到 node.JS 和 Git
一, 安装 Node.JS
1. 下载 Node.JS
Node.JS 官网下载地址: https://nodejs.org/en/download/
tips: 脚本语言需要一个解析器才能运行, JavaScript 是脚本语言, 在不同的位置有不一样的解析器, 如写入 html 的 JS 语言, 浏览器是它的解析器角色. 而对于需要独立运行的 JS,Node.JS 就是一个解析器.
2. 安装
安装的时候除了安装的路径修改为非系统盘外, 其他默认. 我安装到 D:\Program Files\Node.JS, 默认情况下会安装 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
后续继续补充插件
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
- }
来源: http://www.jianshu.com/p/b5886a01b57c