vscodehtml环境配置_从零开始配置 vscode
我们在进行开发工作时,选择一个顺手好用的编辑器是必不可免的, 其中 vscode 就是一个很好的选择。它能让你大部分的工作都在编辑器内完成, 大大的提高开发效率~
概述
vscode 内置了前端相关的基础环境,如emmet扩展。另外的环境则可以通过它自己的插件商城来找到对应的插件。比如常见的预处理器的语法高亮。同时它有良好成熟的生态圈, 足够满足我们日常开发的所需的东西.
它提供了很多便捷的自定义配置,并且贴心的给每行设置都加上了备注,告诉你是有什么作用。
同时 vscode 对中文的支持很好,对于啃英语有些吃力的朋友会比较友善(虽然英语是程序员的基本功之一~
vscode 还内置 git 源代码管理系统, 也就是说我们在写完代码后无需离开编辑器再另开一个bash来提交代码,直接在编辑器上完成对比代码差异后,确定无误后再提交相关的工作。还可以直接在编辑器上进行代码调试, 不过这些不在本文的讨论中。
主题
程序员的日常生活就是在coding, 可以说每天都在跟编辑器打交道, 因此编辑器的颜值能影响到咱们的心情,进而影响开发效率~
在扩展商城里, 我们可以去挑选一些自己喜欢的主题, 来提高编程体验。这里笔者推荐使用One Monokai的主题, 它的配色对阅读代码还是挺舒服的,当然也可以去尝试其他的主题~
下载主题后还需要用户设置上设置使用的主题.
关于快捷键
如果你是某个编辑器的用户,你已经习惯了原先编辑器的快捷键,现在切换过来的话怕又要重新设置自己熟悉的快捷键觉得很麻烦的话,没有关系~
vscode贴心的准备了其他编辑器快捷键插件,节省你重新学习的时间成本。笔者就是从sublime转向vscode从此一去不复返~
同步配置
假设你现在配置了让自己很舒服的一个开发环境,这时你因为硬件故障导致电脑重装或者电脑迁移等因素,要需要重新配置环境,那肯定会挺苦恼的。
因此强烈推荐安装一个settings sync的插件!
它需要一个Github账号以及gits的token,它将你vscode相关的配置相关全部提交上gits上。这样不管你因为什么缘故导致重新安装开发环境,恢复vscode的环境只需三步:下载并安装vscode、下载settings sync、校验token并从远程下载配置。
扩展插件
善用插件的力量可以很大的提升我们的开发效率. 下面是一些常用插件跟大家分享一下.
编辑器扩展
VSCode没有提供直接在浏览器中打开文件的内置界面,所以此插件在快捷菜单中添加了在默认浏览器查看文件选项. 在 windows 下, 可以使用快捷键Alt + b快速的打开.
JavaScript和CSS文件的应用程序。它提供了大量自定义的设置,以及自动压缩保存并导出为.min文件的选项。它能够分别通过uglify-js、clean-css和 html-minifier,与JavaScript、CSS和HTML协同工作。是一个可以不通过脚手架编译就进行压缩的办法,但平时工程化项目还是不能单单依赖这种方式。
TODO备注,但再要找的时候就很难显目的找到了。TODO Highlight顾名思义就是让TODO高亮的插件。
前端类增强
HTML / XML标记, 这在修改标签名上一点挺便捷的.
CSS类和ids定义的地方。当你在 HTML 文件中右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码。
es6已经是经常运用在我们的项目中了, 该扩展包含用于 Vscode 编辑器的 ES6 语法的 JavaScript 代码片段.(同时支持 JavaScript 和 TypeScript)。
vue开发必备, 可以格式化.vue文件, 由官方维护.
vue开发必备, 这个插件基于最新的Vue官方语法高亮文件添加了 Syntax Highlight, 并且依据Vue 2的 API 添加了Code Snippets`.
代码规范化
ESLint就是一个不错的选择. 它能适应项目中的规则来纠正你的不好的习惯。
Editor Config可以让团队开发时统一约定好一种规范. 这个主流的编辑器都支持.
markdown
如果你经常使用 Markdown 的话,还可以使用安装markdownlint和Markdown All in One这两个插件,前者可以约束编写的格式,后者提供方便的键盘快捷方式,目录,自动预览等。
常见问题
Q: Emmet 生成的 HTML 模板如何修改 lang 属性?
A: 在设置中定义 emmet 变量即可:
{
"emmet.variables": {
"lang": "zh-CN",
"charset": "UTF-8"
},
}
用户配置
分享一下自己目前的配置, 可以根据项目所需或者自己的习惯进行调整.
{
"workbench.settings.editor": "ui",
// 文本编辑器
"editor.suggestSelection": "first",
"editor.renderControlCharacters": true,
"editor.multiCursorModifier": "ctrlCmd",
"editor.snippetSuggestions": "top",
"editor.renderWhitespace": "all",
"editor.formatOnPaste": true,
"editor.wordWrap": "on",
"editor.fontSize": 12,
"editor.tabSize": 2,
"editor.codeActionsOnSave": {
// For ESLint
"source.fixAll.eslint": true,
// For TSLint
"source.fixAll.tslint": true,
// For Stylelint
"source.fixAll.stylelint": true
},
"diffEditor.ignoreTrimWhitespace": true,
// 窗口
"window.zoomLevel": 0,
// 文件资源管理
"explorer.confirmDragAndDrop": false,
"explorer.confirmDelete": false,
// 终端
"terminal.integrated.cursorBlinking": true,
"terminal.integrated.rendererType": "dom",
"terminal.integrated.cursorStyle": "line",
// 文件
"files.insertFinalNewline": true,
"files.eol": "\n",
"files.associations": {
"*.vue": "vue",
"*.wxss": "css",
"*.cjson": "jsonc",
"*.wxs": "javascript",
"*.js": "javascript",
"*.wxml": "html"
},
// 语言相关配置
"html.format.extraLiners": "",
"javascript.referencesCodeLens.enabled": true,
// 针对某种语言,配置替代编辑器设置。
// 以下配置大多是设置默认格式化程序
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[markdown]": {
"editor.defaultFormatter": "yzhang.markdown-all-in-one"
},
// ============= plugin config begin =============
// sublime 按 tab 自动补全 tag
"auto-close-tag.SublimeText3Mode": true,
// emmet
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
"vue-html": "html",
"wxml": "html",
"javascript": "javascriptreact"
},
"emmet.syntaxProfiles": {
"vue-html": "html",
},
// 代码格式
"prettier.singleQuote": true,
"prettier.requireConfig": true,
// sync githubg 同步模块
"sync.gist": "Your GitHub Gist ID",
"sync.autoDownload": false,
"sync.autoUpload": true,
"sync.forceDownload": false,
"sync.removeExtensions": true,
"sync.syncExtensions": true,
"sync.forceUpload": true,
// gitlens, git 可视化功能增强
"gitlens.advanced.messages": {
"suppressCommitHasNoPreviousCommitWarning": false,
"suppressCommitNotFoundWarning": false,
"suppressFileNotUnderSourceControlWarning": false,
"suppressGitVersionWarning": false,
"suppressLineUncommittedWarning": false,
"suppressNoRepositoryWarning": false,
"suppressResultsExplorerNotice": false,
"suppressShowKeyBindingsNotice": true
},
"gitlens.views.fileHistory.enabled": true,
"gitlens.views.lineHistory.enabled": true,
// markdown
"markdownlint.config": {
"MD033": {
"allowed_elements": [
"iframe",
"details",
"summary",
"div",
"hr",
"br",
"a",
]
}
},
"workbench.colorTheme": "One Monokai",
"minapp-vscode.disableAutoConfig": true,
}
C/C++ 编译环境搭建
vscodehtml环境配置_从零开始配置 vscode相关推荐
- mysql mmm配置_从零开始配置 MySQL MMM
云平台是个好东西,MySQL-MMM 的典型配置是需要五台机器,一台作为MMM admin,两台master,两台slave.一下子找五台机器真不容易,何况还要安装同样的操作系统. 而有了cloud, ...
- vscode emmet默认模板_从零开始配置 vscode
我们在进行开发工作时,选择一个顺手好用的编辑器是必不可免的, 其中 vscode 就是一个很好的选择.它能让你大部分的工作都在编辑器内完成, 大大的提高开发效率~ 概述 vscode 内置了前端相关的 ...
- wamp安装和配置_手动配置Wordpress环境真香,让我毫不犹豫卸载LAMP和WAMP环境
作为一名Java开发者,我平时也喜欢学习除Java以外的其他技术,例如PHP(有人说PHP是最好的编程语言,我无心考究).对于任何一个开发者,在学习一门新的编程语言过程中,首先都会面对配置开发环境这样 ...
- vscodemaven 配置_二、vscode搭建maven开发环境
ps:没有.bash_profile文件?直接在终端touch .bash_profile创建一个 ps: mvn -v不成功???关掉终端重新来 安装相关插件 Maven for Java,Spri ...
- 如何添加java环境变量_如何配置java环境变量
1. 首先安装java jdk 2. 打开我的电脑--属性--高级--环境变量 3. 新建系统变量JAVA_HOME 和CLASSPATH 变量名:JAVA_HOME 变量值:C:\Program F ...
- 2 snippets vue 修改配置_VsCode从零开始配置一个属于自己的Vue开发环境
VsCode算是比较热门的一个代码编辑器了,全名Visual Studio Code,微软出品 插件众多,功能齐全,平常开发过程中都是用的它,整理了下日常使用的插件及配置供大家参考,废话就不多说了,直 ...
- 2 snippets vue 修改配置_自动化配置vscode的snippets
起因 今天开发时遇到一个问题调了许久,之后才发现是option的结构有问题.觉得这种样板代码不应该去写,而应该自动生成,所以就想着配一下vscode的snippets. 解决过程 小程序需要写的主要是 ...
- 修改java环境变量_怎么配置java环境变量
配置java环境变量的方法:1.右键点击[计算机],选择[属性],点击[高级系统设置],打开环境变量设置:2.新建[JAVA_HOME]变量,并编辑[Path]变量:3.新建[Classpath]变量 ...
- java怎么配置_怎么配置java环境变量
其实现在Java应用得非常的广泛,但是许多朋友在初学Java的时候,是不知道该怎么去配置Java环境变量的.因此,针对这个问题小编特地整理了这篇关于Java环境变量配置的图文详解,现在就来分享给大家. ...
- 天正lisp修改了配置_学习配置Common Lisp开发环境(日志记录)
前提,在.emacs中添加 ; start package.el with emacs (require 'package) ; add MELPA to repository list (add-t ...
最新文章
- 把mysql 中的字符gb2312 改为gbk的方法
- 使用class-dump破解ipa获取.h文件
- golang println与printf区别
- python如何打印字符串_如何在Python中打印“漂亮”字符串输出
- [教程]博客园插入视频教程
- Flume+Kafka整合案例实现
- Delphi对象克隆技术
- 腾讯云通过公众号开通短信验证码
- 近期工作心得(总结篇)
- Impala入门操作
- Javascrit通过百度地图API获取客户端IP、地址
- html盒子移动动画代码,js实现盒子移动动画效果
- 假期错过的...条AI新闻都在这里了
- H3C设置下次启动的配置文件
- 动态sql语句(即sql语句的拼接)
- ue4 Android打包示例
- web前段学习 第二部分
- 计算机上摄氏度的符号怎么输,Word中摄氏度符号℃怎么打
- OPC读写Kepware(C++)
- 编写游戏人物、剧情、对话的8大经验总结