作为程序员,如何将你的VSCode打造的更优雅

开发 开发工具
每个程序员都有一套属于自己的编辑器,一款好用的编辑器带来的不仅仅是工作效率的提升,更有可能让自己的心情更加美好。

[[264327]]

每个程序员都有一套属于自己的编辑器,一款好用的编辑器带来的不仅仅是工作效率的提升,更有可能让自己的心情更加美好。

为什么使用VSCode

[[264328]]

 

不为什么,就因为它好用,开源、免费、颜值高,大厂出品实力派,特别是VSC的一次次更新,不少新的特性让人眼前一亮,这不得不说是微软的良心产品,而且有很多大牛也都由其他编辑器转头向了VSCode,其实一款编辑器是否优秀主要也就是四个方面:

  1. 能够提高我们的工作效率
  2. 对各种语言的支持如何,是否需要繁琐的配置
  3. 是否能够扩展,通俗点就是插件多不多,好不好用
  4. 是否适合自己,毕竟适合自己才是***的

而VSCode前三点无疑都是毋庸置疑的,而第四点我相信用过的人肯定都说好。既然VSCode这么强大,我们更加需要利用好他,来为我们创造价值!

外观(主题和图标)

为什么把外观放在***位,因为爱美之心,人皆有之,首先就要把外观打磨好,不一定说多么的花里胡哨,但至少能让自己看的舒服,每天打开电脑就能够让自己有打开来写代码的欲望,下面我就来推荐下我用的最多的主题插件(以下是es6的Javascript代码片段):

  • fairyFloss(我使用的最多的一个)

作为程序员,如何将你的VSCode打造的更优雅

 

  • Dracula Official(通常是我和fairyFloss切换的一款)

作为程序员,如何将你的VSCode打造的更优雅

 

  • Night Owl(偶尔使用)

作为程序员,如何将你的VSCode打造的更优雅

 

  • One Dark Pro(网上看人推荐的最多的一款)

作为程序员,如何将你的VSCode打造的更优雅

 

  • Material Theme(有很多选择,用的人多)

作为程序员,如何将你的VSCode打造的更优雅

 

  • Material Icon(文件图标)

作为程序员,如何将你的VSCode打造的更优雅

 

主题很多,欢迎大家评论区留下你使用的主题

字体

  • Fira Code(截图里面就是)
  • Input
  • Source Code Pro
  • Anonymous Pro
  • Ubuntu Mono
  • Menlo
  • Consolas
  • Hack

关于字体我之前的一篇文章推荐过,大家可以看看参考一下

配置

  1. "editor.tabSize": 2,//设置Tab键两空格 
  2. "emmet.includeLanguages": {//为HTML和JavaScript启用了emmet 
  3.  "html""html"
  4.  "javascript""javascriptreact" 
  5. }, 
  6. "workbench.iconTheme""material-icon-theme"
  7. "files.autoSave""afterDelay",//设置延时保存,防止意外丢失 
  8. "files.autoSaveDelay": 5000,//自动保存的延时时间 
  9. "editor.wordWrap""on"
  10. "editor.formatOnSave"true,//保存自动格式化 
  11. "editor.formatOnPaste"true,//粘贴自动格式化 

以上是很少的我觉得比较好用的配置

插件

以下插件是我所用到的,觉得比较通用的,还有好多针对不同开发人员的插件也很好用,大家可以自己琢磨以下

  • Bracket Pair Colorizer(括号的着色匹配,实际上我不怎么用)
  • ESLint(不多说了,太强了)
  • markdownlint(经常写markdown)
  • GitHub Pull Requests()
  • GraphQL
  • Import Cost(在编辑器中显示导入/需要包大小)
  • npm Intellisense
  • Path Intellisense(路径自动补全)
  • IntelliSense for CSS class names
  • React Native Tools
  • Todo Tree (这个不多说了,代码TODO树)
  • Version Lens
  • Settings Sync(可以同步自己的VSCode设置、插件、主题等)
  • Word Count(字数统计)
  • Debug for Chrome(可以让你直接在VSCode中调试你的Javascript代码,其实我不怎么用)
  • Prettier — Code formatter(格式化代码,不能没了它,下面是我对他的配置)
  1. "prettier.jsxSingleQuote"true
  2. "prettier.printWidth": 100, 
  3. "prettier.semi"false
  4. "prettier.useTabs"true
  5. "prettier.tabWidth": 2, 

好用的插件实在太多,配置好你的VSCode,你就可以为所欲为了。

结论

以上是我在开发Javascript、NodeJS、React工作的设置,大家有什么好的建议也可以提出来,一起讨论学习! 

责任编辑:庞桂玉 来源: 今日头条
相关推荐

2014-12-01 10:05:25

程序员

2019-04-19 08:04:57

程序员Dockerfile容器

2015-08-03 09:09:20

程序员脑子快

2017-10-22 16:16:03

程序员编程代码

2016-03-28 10:01:45

优秀程序员关键阅读

2018-08-06 10:25:07

Linux命令程序员

2023-12-21 10:26:30

​​Prettier

2022-05-13 08:48:50

React组件TypeScrip

2013-12-04 10:23:00

产品经理程序员

2022-08-11 11:09:38

线上问题程序员

2020-03-29 20:09:44

程序员技术开发

2021-02-05 14:56:39

YouTube编程程序员

2018-07-12 14:20:33

SQLSQL查询编写

2022-03-11 12:14:43

CSS代码前端

2016-03-04 11:06:20

更优秀程序员

2012-11-23 17:20:43

Linux服务器

2012-12-28 09:58:50

程序员代码编程

2014-08-08 10:24:37

程序员

2014-08-05 09:15:55

程序员

2021-08-31 08:32:40

开源项目开发
点赞
收藏

51CTO技术栈公众号