R·ex / Zeng


音游狗、安全狗、攻城狮、业余设计师、段子手、苦学日语的少年。 MUGer, hacker, developer, amateur UI designer, punster, Japanese learner.

从 Sublime Text 转向 VS Code

注意:本文发布于 1060 天前,文章中的一些内容可能已经过时。

前几天突然看群里某同学提到了 VS Code,然后发现 VS Code 已经比刚出的时候好了很多,于是我就开始尝试了。先挂个梯子从 官网 那儿下载了下来。

先试了一下,发现 VS Code 与 Sublime Text 相比最大的缺点就是不能同时支持多个文件夹的打开,只能显示某一个文件夹里面的内容,于是我索性把 E 盘拖了进去。

然后发现插件很方便,于是装了一通插件:

  • Color Highlight
  • ESLint
  • Flatland Monokai
  • Laravel Blade Snippets
  • PHP Debug
  • Simple Ruby ERB
  • Sublime Text Keymap

然后通读了一遍插件说明和编辑器默认配置文件,做了如下修改:

{
    // csslint 规则配置
    "css.lint.compatibleVendorPrefixes": "warning",
    "css.lint.duplicateProperties": "error",
    "css.lint.emptyRules": "error",
    "css.lint.zeroUnits": "warning",
    // 光标样式
    "editor.cursorBlinking": "phase",
    "editor.cursorStyle": "line",
    // 允许拖放
    "editor.dragAndDrop": true,
    // 没有选中的文字时复制无效
    "editor.emptySelectionClipboard": false,
    // 字体设置
    "editor.fontFamily": "Consolas, 'WenQuanYi Micro Hei Mono', monospace",
    "editor.fontSize": 12,
    // 自动格式化(虽然我的代码风格是完全符合格式的,但还是打开吧)
    "editor.formatOnType": true,
    // 右侧滚动条显示代码缩略图
    "editor.minimap.enabled": true,
    // 降低一下鼠标滚动的速度
    "editor.mouseWheelScrollSensitivity": 0.4,
    // 允许 `ctrl+滚轮` 缩放
    "editor.mouseWheelZoom": true,
    // 显示缩进参考线
    "editor.renderIndentGuides": true,
    // 不允许越过最后一行继续滚动
    "editor.scrollBeyondLastLine": false,
    // 每行固定宽度
    "editor.wordWrap": "bounded",
    "editor.wordWrapColumn": 120,
    // 配置 Node.js 目录
    "eslint.nodePath": "D:\\DevCache\\npm\\global",
    // 配置 eslint
    "eslint.options": {
        "configFile": "E:\\.vscode\\eslintrc.json"
    },
    // 保存时执行 eslint
    "eslint.run": "onSave",
    // 不显示“打开的文件”窗格
    "explorer.openEditors.visible": 0,
    // 插件自动更新
    "extensions.autoUpdate": true,
    // 默认行尾为 unix
    "files.eol": "\n",
    // 这些文件不在左侧显示
    "files.exclude": {
        "**/.DS_Store": true,
        "**/.git": true,
        "**/.hg": true,
        "**/.svn": true,
        "**/$RECYCLE.BIN": true,
        "**/node_modules": true
    },
    // 保存时确保有一个结尾空行
    "files.insertFinalNewline": true,
    // 去除多余行尾空格
    "files.trimTrailingWhitespace": true,
    // vscode 内置的 git 不好用,禁用掉
    "git.enabled": false,
    // 设置 php 路径以便使用 phplint
    "php.validate.executablePath": "D:\\PHP\\php.exe",
    // 默认的 terminal 改为 git bash
    "terminal.external.windowsExec": "D:\\Git\\git-bash.exe",
    "terminal.integrated.shell.windows": "D:\\Git\\git-bash.exe",
    // 不显示菜单栏
    "window.menuBarVisibility": "hidden",
    // 如果窗口已退出全屏模式,应还原为全屏模式
    "window.restoreFullscreen": true,
    // 设置标题栏文字为 `·/path/to/file.ext - Visual Studio Code`
    "window.title": "${dirty}${activeEditorLong}${separator}${appName}",
    // 隐藏最左边那一排图标(活动栏)
    "workbench.activityBar.visible": false,
    // 颜色主题
    "workbench.colorTheme": "Flatland Monokai",
    // 图标主题
    "workbench.iconTheme": "vs-seti",
    // 禅模式时显示状态栏和标签
    "zenMode.hideStatusBar": false,
    "zenMode.hideTabs": false
}

此外,虽然 Sublime Text Keymap 已经让 VS Code 有了 Sublime Text 的键位映射,但我还额外修改了几个键位:

[
    // 新文件
    { "key": "ctrl+t", "command": "workbench.action.files.newUntitledFile" },
    // 下一个标签
    { "key": "ctrl+tab", "command": "workbench.action.nextEditor" },
    // 上一个标签
    { "key": "ctrl+shift+tab", "command": "workbench.action.previousEditor" }
]

对于 PHP Debug,则需要先开启 php_xdebug 扩展,大概的方法就是先搞到一个 php_xdebug.dll,然后编辑 php.ini

zend_extension=php_xdebug.dll
[XDebug]
xdebug.remote_enable = 1
xdebug.remote_connect_back = 1
xdebug.remote_port = 8001
xdebug.scream = 0
xdebug.show_local_vars = 1
xdebug.remote_autostart = 1

然后重启相关服务即可。


基本上是直接适应了新环境,用起来简直爽爆了!

版权声明:除文章开头有特殊声明的情况外,所有文章均可在遵从 CC BY 4.0 协议的情况下转载。
上一篇: Laravel 版本与 PHP 版本之间的坑
下一篇: CSS 中关于 overflow 的限制和绕过方法

这是我们共同度过的

第 1553 天