代码改变世界

Visual Studio Code 使用心得

2017-06-09 15:52  胖子  阅读(14704)  评论(2编辑  收藏  举报

最好用的跨平台编辑器,没有之一!

修改编辑器的显示语言

起因:vsCode又升级了(1.13.0),重启之后发现熟悉的中文菜单没有了,而且设置文件 settings.json 也都变成英文了,对非英文母语的人来说,还是有很不方便的地方。

解决办法:F1 -> Configure Language(可以只输入 language) ,打开 locale.json 进行修改

{
	// Defines VSCode's display language.
	// See https://go.microsoft.com/fwlink/?LinkId=761051 for a list of supported languages.
	// Changing the value requires restarting VSCode.
	// 想体验原味的话,设置为:en ,中文的话就设置为:zh-CN
	"locale":"zh-CN"
}

环境配置

打开:首选项→用户设置(settings.json)
建议配置如下

// 将设置放入此文件中以覆盖默认设置
{
    "editor.fontSize": 16
    ,"editor.fontFamily": "PingFang SC"
    //,"editor.fontFamily": "Microsoft Yahei"
    // 有苹方字体用苹方,没有就用雅黑,mac下字体建议设置为14
}

插件安装位置

win %USERPROFILE%\.vscode\extensions
mac ~/.vscode/extensions
linux ~/.vscode/extensions

推荐插件

  • vscode-icons :图标扩展
  • Markdown Theme Kit :markdown样式
  • Express :将当前目录映射为web server
  • HTML Snippets :HTML开发使用
  • JavaScript(ES6) code snippets :JavaScript开发使用

使用vsCode作为首选markdown编辑器的使用心得

通过大量的使用各种markdown编辑器,最后比较得出vsCode是最好用的工具。
当然,vsCode也并不完美,但以下几个方面还是秒杀相当多的一批md编辑器。

  • 跨平台,免费!
  • 100%的本地环境,无需联网!
  • 99%的可定制性!
  • 安装包小,性能好!
  • 不支持markdown扩展语法中的task list,流程图!

自定义markdown预览样式

修改 用户设置(settings.json) 如下:

// 将设置放入此文件中以覆盖默认设置
{
    "editor.fontSize": 16
    ,"editor.fontFamily": "PingFang SC"
    ,"markdown.styles": [
        "file:///D:/work/document/css/vscode-markdown.css" // 自定义的样式文件
    ]
}

支持 Font Awesome

修改 用户设置(settings.json) 如下:

// 将设置放入此文件中以覆盖默认设置
{
    "editor.fontSize": 16
    ,"editor.fontFamily": "PingFang SC"
    ,"markdown.styles": [
        "http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.css" // 连接线上资源
        //,"file:///D:/work/document/css/font-awesome/4.6.3/css/font-awesome.css" // 本机资源
        ,"file:///D:/work/document/css/vscode-markdown.css" // 自定义的样式文件
    ]
}

导出PDF

方法一:使用 Markdown PDF 扩展
优点:简单
缺点:功能不够强大, Windows下需要自行添加 phantomjs

方法二:使用chrome的扩展与打印功能
添加markdown reader扩展,又能预览文件,又能导出PDF。
想要有更好体验,请参考另一篇文章: MarkdownReader插件改造