PostsOldAbout

优化工作流之编辑器

· 前端技术, 基础编程

工欲善其事必先利其器

灵活使用我们的编辑器，是提效的重要一步。

如今，

大家最开始接触的应该是window自带的notepad
（我曾经使用在上面做简单的开发。大多数的操作是复制粘贴然后再做修改操作。）

学习php的时候使用的zend这款大杀器。

大一学习C的时候用的是vs++

后来用notepad++做代码阅读

用过editplus做大文件的查看

大学时光大多数是在使用sublime这款轻量级编辑器做开发

现在主要是使用vscode + sublime
（还有一些在linux平台的vi vim）

。介绍我们常见的插件。

Emmet插件。

这款插件在vscode是内置集成的。而在sublime平台需要自行安装插件。
好处是可以很快的编写html结构，html信息。

Emmet gif

可以看到

它的功能相当的强大

Beautify

这个插件可以有助于格式化我们的代码。（当然是有一套定义的规则，可以在配置中设置）

Color HighLight

在输入#xxxxxx以后 该插件能将该处区域设置对对应颜色。
（应该是识别输入，再匹配规则，然后再change color）

还有各种对应的lint 插件。具体取决于你有使用什么。。

vscode 是一个很灵活 轻量级的编辑器。

介绍一下常用有助于开发的快捷键（当然大多数快捷键都是可以去个性化设置的。）

(以下为默认)

  1. ctrl + k + ctrl + 0 用于折叠所有代码行（方便看项目文件内部结构）
  2. ctrl + k + ctrl + j 用户展开所有代码行
  3. ctrl + k + ctrl + 1/2/3/4 选择折叠的模式
  4. alt + 左/右 到上一个或者下一个焦点
  5. ctrl + shift + n 用户打开一个新的编辑器实例
  6. ctrl + w 关闭当前编辑焦点窗口
  7. ctrl + 2/3/4/5/6 打开一个新的编辑区域
  8. home / end 移动至行首或者行尾
  9. 双击选区后 ctrl + f 快捷搜索
  10. alt + f12 预览选区引用代码
  11. f12 跳转模块

ctrl + p 快捷选择进入某些文件
– 列出当前可执行的动作
– : 跳转到行数，也可以Ctrl+G直接进入
– @ 跳转到symbol（搜索变量或者函数），也可以Ctrl+Shift+O直接进入
– @:根据分类跳转symbol，查找属性或函数，也可以Ctrl+Shift+O后输入:进入
– # 根据名字查找symbol，也可以Ctrl+T

上面列的是我常用的。

下面再列一个。

vscode 的snippet 代码片段的功能。（很多编辑器其实都有）

我们常见的脚手架，整合了大量的框架以及库。
我们时常编写代码时常会有冗余重复繁琐定义部分。
这部分我们完全可以交给snippet来做

设想我们项目是React的。

常见的React的proptypes定义
常见的React文件头定义
常见的函数式组件编写。

这些完全可以使用代码片段来替我们完成

    "New-Use-React-File": {
        "prefix": "nrf",
        "body": [
            "import React, { Component } from 'react'",
            "import PropTypes from 'prop-types'",
            "import '${1:${TM_FILENAME_BASE}}.${2:scss}'",
            "\n",
            "class ${3:${TM_FILENAME_BASE}} from Component {",
            "  constructor(props) {",
            "    super(props)",
            "    $5",
            "  }",
            "export default ${3:${TM_FILENAME_BASE}}",
            ""
        ],
        "scope": "javascript, typescript",
                "description": "生成一个基础的react组件文件"
    },
// 这是一个简单的演示

https://macromates.com/manual/en/snippets

这个是规则

prefix 是缩写部分
body 是要填充的内容部分
scope 定义适用于该代码段的语言
description 用于选取得时候在选择区得描述

$1 $2 标识 光标位置
$1 $1同时绑定代表值之间得联动。

${TM_FILENAME_BASE} 是一个变量。
可用得变量有
可以使用以下变量：

TM_SELECTED_TEXT 当前选定的文本或空字符串
TM_CURRENT_LINE 当前行的内容
TM_CURRENT_WORD 光标下的单词内容或空字符串
TM_LINE_INDEX 基于零索引的行号
TM_LINE_NUMBER 基于单索引的行号
TM_FILENAME 当前文档的文件名
TM_FILENAME_BASE 没有扩展名的当前文档的文件名
TM_DIRECTORY 当前文档的目录
TM_FILEPATH 当前文档的完整文件路径
CLIPBOARD 剪贴板的内容
用于插入当前日期和时间：

CURRENT_YEAR 本年度
CURRENT_YEAR_SHORT 本年度的最后两位数
CURRENT_MONTH 月份为两位数（例如’02’）
CURRENT_MONTH_NAME 月份的全名（例如’July’）
CURRENT_MONTH_NAME_SHORT 月份的简称（例如’Jul’）
CURRENT_DATE 这个月的哪一天
CURRENT_DAY_NAME 一天的名字（例如’星期一’）
CURRENT_DAY_NAME_SHORT 当天的简称（例如’Mon’）
CURRENT_HOUR 24小时时钟格式的当前小时
CURRENT_MINUTE 目前的一分钟
CURRENT_SECOND 目前的第二个

这是一些基本得用法。足够让我们完成一些有意思得事情。
我们可以给我们得脚手架或者开发环境定义一套snippet。
然后用于开发工作效率。
但是可能定义后得使用上可能需要一定得学习成本。

建议还是要衡量 而不是盲目得使用。

以上说的仅仅是沧海一粟，每个人都应该拥有自己最舒服的开发环境。

2018/11/10
写于 今日微凉的鹭岛。

2026 © zwkang.RSS