vscode emmet默认模板_从零开始配置 vscode

我们在进行开发工作时,选择一个顺手好用的编辑器是必不可免的, 其中 vscode 就是一个很好的选择。它能让你大部分的工作都在编辑器内完成, 大大的提高开发效率~

概述

vscode 内置了前端相关的基础环境,如emmet扩展。另外的环境则可以通过它自己的插件商城来找到对应的插件。比如常见的预处理器的语法高亮。同时它有良好成熟的生态圈, 足够满足我们日常开发的所需的东西.

它提供了很多便捷的自定义配置,并且贴心的给每行设置都加上了备注,告诉你是有什么作用。

同时 vscode 对中文的支持很好,对于啃英语有些吃力的朋友会比较友善(虽然英语是程序员的基本功之一~

09021755f8366ffebdff0bba74f6e7e0.png

vscode 还内置 git 源代码管理系统, 也就是说我们在写完代码后无需离开编辑器再另开一个bash来提交代码,直接在编辑器上完成对比代码差异后,确定无误后再提交相关的工作。还可以直接在编辑器上进行代码调试, 不过这些不在本文的讨论中。

主题

One Monokai Theme

程序员的日常生活就是在coding, 可以说每天都在跟编辑器打交道, 因此编辑器的颜值能影响到咱们的心情,进而影响开发效率~

在扩展商城里, 我们可以去挑选一些自己喜欢的主题, 来提高编程体验。这里笔者推荐使用One Monokai的主题, 它的配色对阅读代码还是挺舒服的,当然也可以去尝试其他的主题~

下载主题后还需要用户设置上设置使用的主题.

cfc5da07024b660e11452962c8abfe4c.png

关于快捷键

如果你是某个编辑器的用户,你已经习惯了原先编辑器的快捷键,现在切换过来的话怕又要重新设置自己熟悉的快捷键觉得很麻烦的话,没有关系~

vscode贴心的准备了其他编辑器快捷键插件,节省你重新学习的时间成本。笔者就是从sublime转向vscode从此一去不复返~

4ae8a310ac848ecf512073dd9a5ae69c.png

同步配置

假设你现在配置了让自己很舒服的一个开发环境,这时你因为硬件故障导致电脑重装或者电脑迁移等因素,要需要重新配置环境,那肯定会挺苦恼的。

因此强烈推荐安装一个settings sync的插件!

它需要一个Github账号以及gitstoken,它将你vscode相关的配置相关全部提交上gits上。这样不管你因为什么缘故导致重新安装开发环境,恢复vscode的环境只需三步:下载并安装vscode、下载settings sync、校验token并从远程下载配置。

扩展插件

善用插件的力量可以很大的提升我们的开发效率. 下面是一些常用插件跟大家分享一下.

编辑器扩展

Open-In-Browser
由于VSCode没有提供直接在浏览器中打开文件的内置界面,所以此插件在快捷菜单中添加了在默认浏览器查看文件选项. 在 windows 下, 可以使用快捷键Alt + b快速的打开.

c15da510239662fd777d400c57c36ce4.gif

Minify 这是一款用于压缩合并JavaScriptCSS文件的应用程序。它提供了大量自定义的设置,以及自动压缩保存并导出为.min文件的选项。它能够分别通过uglify-jsclean-css和 html-minifier,与JavaScriptCSSHTML协同工作。是一个可以不通过脚手架编译就进行压缩的办法,但平时工程化项目还是不能单单依赖这种方式。

9cc749b7161b89a7f62efcfb419c1b8d.gif

TODO Highlight 开发中一些没有做完的事,一般会习惯性的打上TODO备注,但再要找的时候就很难显目的找到了。TODO Highlight顾名思义就是让TODO高亮的插件。

48894f0b65d0c2db5fa7e2025e71b7ce.png

前端类增强

Auto Rename Tag 自动重命名配对的HTML / XML标记, 这在修改标签名上一点挺便捷的.

73572b3aede96297e411b7de019a66f5.gif

Auto Close Tag 这个扩展是为 XML,PHP,Vue,JavaScript,TypeScript,JSX,TSX 等其他语言启用的。同时它是可配置的。输入标签的右括号后,结束标签将被自动插入。

e607993080361b6d4918181d0d5624df.gif

CSS Peek 使用此插件,你可以追踪至样式表中CSS类和ids定义的地方。当你在 HTML 文件中右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码。

19d24a78c72f17c506522ac167032253.gif

JavaScript (ES6) code snippets es6已经是经常运用在我们的项目中了, 该扩展包含用于 Vscode 编辑器的 ES6 语法的 JavaScript 代码片段.(同时支持 JavaScript 和 TypeScript)。

Vetur vue开发必备, 可以格式化.vue文件, 由官方维护.

Vue 2 Snippets vue开发必备, 这个插件基于最新的Vue官方语法高亮文件添加了 Syntax Highlight, 并且依据Vue 2的 API 添加了Code Snippets`.

7b2a4df713a52823d98a83da6a799bf7.gif

WakaTime 统计开发时间和效率,只需注册一个账号即可~

代码规范化

ESLint 要养成一个良好的编程习惯, ESLint就是一个不错的选择. 它能适应项目中的规则来纠正你的不好的习惯。

Prettier Prettier 是目前 Web 开发中最受欢迎的代码格式化程序。安装了这个插件,它就能够自动应用 Prettier,并将整个 JS 和 CSS 文档快速格式化为统一的代码样式。

7b2a4df713a52823d98a83da6a799bf7.gif

EditorConfig Editor Config可以让团队开发时统一约定好一种规范. 这个主流的编辑器都支持.

markdown

如果你经常使用 Markdown 的话,还可以使用安装markdownlintMarkdown 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++ 编译环境搭建

C/C++ for Visual Studio Code (Preview)


原文出自:[环境搭建] 从零开始配置 vscode

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/561308.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

djano 字段不重复_Java 14 发布了,不使用quot;classquot;也能定义类了?还顺手要干掉Lombok!...

2020年3月17日发布,Java正式发布了JDK 14 ,目前已经可以开放下载。在JDK 14中,共有16个新特性,本文主要来介绍其中的一个特性:JEP 359: Records官方吐槽最为致命早在2019年2月份,Java 语言架构师 Brian Goe…

java队列_java集合入门和深入学习(详解),看这篇就差不多了

一、集合入门总结集合框架:Java中的集合框架大类可分为Collection和Map;两者的区别:1、Collection是单列集合;Map是双列集合2、Collection中只有Set系列要求元素唯一;Map中键需要唯一,值可以重复3、Collect…

oracle课程小结,Oracle 数据库优化实战心得总结

一般情况下,对于频繁访问但是不频繁修改的数据,内部设计应当物理不规范化;对于频繁修改但并不频繁访问的数据,内部设计应当物理规范化。3.充分利用内存,优化sga、pga等(11g已经实现了sgapga自动化,但有的时…

苹果公司的企业文化_百度、苹果、脉脉等互联网大厂的企业文化衫还能这么潮?...

转眼2020年就已经到年中啦,很多企业已经敲锣打鼓,筹备着年中的会议团建了,有趣的,好玩的,有创意的,体面的,大场面的,国际范儿的,到底怎么样的年中策划才是最NICE的呢&…

命名空间跟作用域是什么关系_魏如萱许光汉首次合唱新歌《什么跟什么有什么关系》_娱乐频道...

近日,许光汉与新晋金曲奖歌后魏如萱合作的最新单曲《什么跟什么有什么关系》已经上线。歌曲由金曲奖最佳作词人李焯雄作词,魏如萱作曲,陈建骐担当制作,魏如萱和许光汉共同演唱。单曲收录于十一音乐的年度限定合作企划“不完美人生…

二级域名是否可以随意设定_新老域名是否影响SEO优化收录排名?企业需要多域名做网站吗?...

(文/守护袁昆)各互联网平台想免费做营销推广变得比较困难,而大多数中小企业又没什么资金方面的营销预算,所以付费推广广告也没法做。建立自己的企业官网貌似是不错的方式。传统企业在互联网上玩了一圈,发现还是自己的企业官网最靠谱。那么问题…

oracle pr,PRMSCAN ORACLE碎片扫描合并工具

prmscan 是诗檀软件独立研发的ORACLE数据块碎片扫描合并工具,其适用于以下的场景:误手动删除了文件系统(任意文件系统 NTFS、FAT、EXT、UFS、JFS等)或ASM上的数据文件文件系统损坏,导致数据文件大小变成0 bytes即数据文件被清零文件系统损坏&…

win10启动修复_以安全模式启动win10的4种方法,简单高效,修复电脑故障必用技巧...

在安全模式下启动Windows7只是小菜一碟,你所要做的就是按下Shift8来中断启动过程,然而,在安全模式下启动windows 10的过程并不是那么简单。一些用户甚至认为Windows 10无法使用安全模式,但事实并非如此,有很多方法可以…

usb接口供电不足_Win7系统下电脑USB供电不足的解决方法

关注奕奇科技,学习更多小妙招,工作效率加倍小妙招,值得收藏笔记本主板USB供电不足的现象可以解释成两种情况:第一种是笔记本使用电池的时候会自动切换到较低的功耗,最大的电流标准是500mA,电压是5V&#xf…

php memcached 队列,redis获取所有队列_memcached

scrapy-redis实现分布式中, 获取redis队列中的612x230 - 24KB - PNGscrapy动态的从redis队列中获取源,并启动spid558x462 - 128KB - PNGRedis实现消息队列700x365 - 36KB - JPEGRedis实现简单消息队列 - 滚动_【北京联盟】677x441 - 9KB - PNGRedis实现简单消息队列 - 滚动_【北…

BP算法和RNN_模型CNN-RNN-LSTM和GRU简介

深度学习自从2006年以后已经“火”了十多年了,目前大家看到的,最普遍的应用成果是在计算机视觉、语音识别和自然语言处理(NLP)。最近工业界也在努力地扩展它的应用场景,比如游戏、内容推荐和广告匹配等等。深度模型架构…

电脑向linux服务器传输文件,windows如何通过ssh工具向linux服务器上传和下载文件?...

这个是很简单的。我用win10和kali给你举例子。kali自带了ssh,只不过我们需要开启它。kali下运行ps -e | grep ssh,你会发现已经有了ssh。只是没有启动,启动方法是/etc/init.d/ ssh start。如果你的linux机器不是kali,就先apt-get …

python bar图_python使用matplotlib绘图 — barChart | 学步园

matplotlib是python最著名的绘图库,它提供了一整套和matlab相似的命令API,十分适合交互式地进行制图。而且也可以方便地将它作为绘图控件,嵌入GUI应用程序中。它的文档相当完备,并且Gallery页面中有上百幅缩略图,打开之…

python random randint_python中random.randint(1,100)随机数中包不包括1和100

展开全部 在python中的random.randint(a,b)用于生成一个2113指定范围内的整数。5261其中参数a是下4102限&#xff0c;1653参数b是上限&#xff0c;生成的随机数n: a < n < b。 print random.randint(12, 20) #生成的随机数n: 12 < n < 20 print random.randint(20,…

curaengine linux编译,CuraEngine开源程序解读

8种机械键盘轴体对比本人程序员&#xff0c;要买一个写代码的键盘&#xff0c;请问红轴和茶轴怎么选&#xff1f;meshmesh中主要定义了关于三角形网格三个类和这三个类的一些成员函数&#xff0c;分别是MeshVertex&#xff0c;MeshFace以及Mesh。全局变量const int类型的全局变…

python docx库安装_详解python中docx库的安装过程

python中docx库的简介 python-docx包&#xff0c;这是一个很强大的包&#xff0c;可以用来创建docx文档&#xff0c;包含段落、分页符、表格、图片、标题、样式等几乎所有的word文档中能常用的功能都包含了&#xff0c;这个包的主要功能便是用来创建文档&#xff0c;相对来说用…

创新固定资产管理方式:易点易动集成企业微信的全新解决方案

在当今竞争激烈的商业环境中&#xff0c;高效的固定资产管理对于企业的成功至关重要。然而&#xff0c;传统的资产管理方式往往繁琐、容易出错&#xff0c;并且缺乏实时性和准确性。为了解决这些挑战&#xff0c;易点易动与企业微信进行了集成合作&#xff0c;推出了一种全新的…

python删除重复元素_Python-删除列表中重复元素的方法

原博文 2017-12-21 17:07 − 1.set()方法 x [1,2,3,4,5,1] y list(set(x)) print(y) [1, 2, 3, 4, 5] 2. x [b,c,d,b,c,a,a] y {}.fromkeys(x).ke... 相关推荐 2019-09-28 21:13 − Python python是一种跨平台的计算机程序设计语言&#xff0c;是一种面向对象的动态类型语…

linux内核提取ret2usr,Linux内核漏洞利用技术详解 Part 2

前言在上一篇文章中&#xff0c;我们不仅为读者详细介绍了如何搭建环境&#xff0c;还通过一个具体的例子演示了最简单的内核漏洞利用技术&#xff1a;ret2usr。在本文中&#xff0c;我们将逐步启用更多的安全防御机制&#xff0c;即SMEP、KPTI和SMAP&#xff0c;并逐一解释它们…

raid5坏了一块盘怎么办_机械硬盘的坏道处理——屏蔽之

分享一次处理硬盘坏道的经历。打算写的让小白也能照着葫芦画葫芦。机械硬盘的阿喀琉斯之踵无疑是坏道。倘若一块硬盘出现了坏道怎么办&#xff1f;当然是即刻备份资料更换新硬盘。毫无疑问&#xff0c;二手硬盘几乎都是被榨干的状态&#xff0c;活生生地一副论斤卖的样子。当然…