导航:首页 > 编程语言 > textmate2安装json

textmate2安装json

 发布时间：2023-05-16 17:31:10

㈠ textmate mac版这款多功能纯文本编辑器如何使用有老司机有教程吗感谢！

TextMate大部分尝试模仿NSTextView系统组件的行为，正如应用程序（如Mail，Safari和基本上所有其他Cocoa应用程序）所使用的那样。
本部分介绍了与文本编辑相关的一些额外功能。
一、自动配对字符（引号等）
编写结构化文本（如标记或源代码）时，会有成对的字符。例如，在编程语言中，你很少输入一个左大括号（{）而不需要大括号（}）。
为了帮助您保持这些字符的平衡，TextMate会在输入开头字符后在插入符号后面插入适当的结束字符。如果输入结束字符，TextMate足够智能，可以覆盖自动插入的字符。如果您键入开头字符，然后使用反向删除（⌫）将其删除，则自动插入的字符也将被删除。如果您只想删除自动插入的字符，请改用forward delete（⌦）。
也可以通过选择文本并键入开始字符来将选定内容打开/关闭。例如，如果您键入foo，选择它并键入，(则TextMate将使它(foo)在插入结束括号后放置插入符号。
实际的字符对在捆绑首选项中定义，针对不同的语言和上下文使用不同的设置。例如，在源代码中，除了注释和字符串之外，撇号被设置为使自己成为关闭字符。这是通过使用范围选择器实现的。
与自动配对字符有关的两个有用的快捷方式（定义为源包中的宏并针对几种语言重写）是：
1.⌘↩
移动到行尾并插入换行符。
例如，如果你写：
print("foo
然后，您将需要")脱字符的右侧，现在可以使用⌘+来跳过这两个字符并插入一个新行。
2.⇧⌘+
移动到行尾，插入一个;，然后插入一个换行符。
二、完成
TextMate在⎋（转义）上有一个简单而有效的完成功能。它将根据当前文档中的匹配完成当前单词。如果有多个匹配项，您可以连续按⎋循环选择这些匹配项。也可以使用cycle向后循环。
这些比赛按照脱字符号的距离排序，这意味着候选人距离脱字号较近的候选人将被推荐在离候选人较远的地方。
有两种可能性来增加这种默认完成。两者都通过捆绑首选项完成。
第一个选项是提供应始终提出的候选人名单。例如，Objective-C包含一个常用的Cocoa框架方法列表。这是一系列候选人，例如：
completions = ( 'retain', 'release', 'autorelease', 'description' );
另一个选项是设置一个自定义shell命令来收集完成。shell命令将具有可用的TM_CURRENT_word 环境变量（作为需要完成的单词）以及其他变量。
例如，C包有一个自定义完成命令设置，用于当插入符号位于预处理程序include指令内时，它看起来像这样：
completionCommand = 'find "$TM_DIRECTORY" \
-name "$TM_CURRENT_WORD*.h" -maxdepth 2 \
-exec basename "{}" \;|sort';
这将查找匹配项，当前目录（和直接子目录）中的任何文件，其中包含当前词作为前缀和.h扩展名。
当您提供自己的完成命令（或列表）时，您可能想要禁用默认匹配。这可以通过设置disableDefaultCompletion来完成。
三、复制并粘贴
1剪贴板历史记录
每次复制或剪切文本时，都会将文本压入堆栈。
通过按^⌘⌘V你会看到所有以前的剪报列表，并可以选择一个你想要使用箭头键粘贴。使用return来插入它并转义以关闭列表。如果您关闭了该列表，则当前选定的剪辑将是您下次使用粘贴功能时粘贴的内容。无需从列表中选择剪辑，您可以使用⇧⌘V将上一个剪辑粘贴到列表中。在那之前再次使用该键将前进到剪辑等等。要返回，您可以使用⌥⌘V。当您想从一个文档创建多个副本，然后将这些LIFO样式（后进先出）粘贴到另一个文档（或同一文档中的另一个位置）时，这些等价键就很有用。
2.重新缩进的粘贴
当粘贴文本时，TextMate将估计粘贴文本的缩进以及当前缩进级别，并调整粘贴文本以使其与当前缩进相匹配。
估算是使用重新缩进文本部分中提到的缩进规则完成的。
如果您暂时想要避免这种情况，您可以使用^⌘V粘贴文本。您也可以在首选项的文本编辑部分中永久禁用重新缩进粘贴。
四、编辑模式
1.免费编辑
您可以在编辑→模式子菜单（⌥⌘E）中启用或禁用免编辑编辑。
在这种模式下，插入符号的移动不会受到行尾或制表位的限制。
在使用ASCII图时，在给定列上插入某些内容（并且不想插入填充）以及其他几种情况时，这很有用。
当进行栏选择时，（暂时）启用freehanded模式，允许您在行末尾进行选择。
也可以通过在按住选项键（⌥）的同时单击鼠标来将插入符号放在行尾以外。
2.覆盖模式
通过在编辑→模式子菜单（⌥⌘O）中启用覆盖模式，文档中已存在的字符将在您键入而不是正常插入时被覆盖。
使用列数据时这很有用，例如：
想象一下，我们想要覆盖第一列中的一些值。有点类似，我们可能有一条固定宽度的行，并希望替换其中的一部分，但保留宽度，例如我们可以使用这样的代码，我们必须将该值与第20列对齐，但要覆盖标签：
printf("Value is %3d", 37).
五、查找和替换
除了标准查找对话框外，TextMate还有一个查找子菜单（位于编辑菜单中），它为您提供查找和替换操作的关键等价物。
1.在查找对话框中插入换行符和制表符
查找对话框使用正常的系统控制来接受输入。您可以使用替换文本字段旁边的箭头在单行和多行文本控件之间切换。如果需要在任一文本字段中插入换行符或制表符，可以在按住选项卡（⇥）或返回（↩）键的同时按住选项（⌥）。这将插入一个文字标签或换行符。2查找剪贴板
两个有用的关键等价物是⌘E和⌘G。第一个将选择复制到共享查找剪贴板。这适用于大多数应用程序，并允许您通过按⌘G查找该字符串的下一个匹配项。
查找剪贴板适用于各种应用程序，因此无论是在Safari，TextEdit，Mail，TextMate，Terminal，Console还是类似应用程序中，都可以将选定文本复制到查找剪贴板，切换应用程序并使用⌘G查找该字符串。
另外TextMate提供了⇧⌘E将选择复制到替换剪贴板。这通常对于保存查找对话框很有用，例如，如果您希望用|项目列表中的管道字符（）替换换行符，选择一个换行符，请按⌘E将其用作查找字符串。现在输入a |，选择它并按⇧⌘E，以便它被复制到替换剪贴板。
然后下一步是按^⌘F在整个文档中执行替换，或者选择希望替换的范围，然后使用^⇧⌘F替代。
六、移动文本
1.增加/减少缩进级别
在文本菜单中，有一个Shift⌘和Shift Right操作绑定到⌘[和⌘]。这些将按一个选项卡的大小增加和减少缩进。
在许多欧洲的键盘布局中，这些键都比较尴尬，除此之外，还可以使用⌥⇥和⌥⇤（其中⇤使用achieved实现）。
2.向上/向下/向左/向右移动文本
如果您想要向上/向下移动一行/一行或移动一个字/列选择，可以通过按住^⌘并使用箭头键移动选择来完成。它也适用于在没有选择的情况下向上/向下移动线条。
3.重新缩进文本
如果您的代码已打破缩进，您可以选择它并使用文本→缩进选择（没有选择缩进当前行）。
估算缩进的规则是使用包首选项按语言设置的。有关更多详细信息
七、选择文字
选择文字是通过按住⇧的同时使用正常的移动键来实现的。另外，编辑→选择子菜单可以选择当前的单词，行，段落，括号和整个文档。
1.编辑多行
有时需要为可变长度的行添加后缀，或者可能需要编辑这些行的最后部分。
虽然您可以使用查找和替换，但更简单的方法是选择需要编辑的行，然后使用文本→编辑选中的每一行（⌥⌘A），并且插入符号将放在第一行的末尾在选择线。
您现在可以键入新文本，删除文本或返回并编辑现有文本，并且将通过所有（先前选定的）行进行镜像。要离开此模式，只需将插入符号从当前行移开即可。
2.列选择
可以通过按住⌥并用鼠标进行选择，或者定期选择，然后按⌥一次（在两种选择之间切换）来选择列数据。
您可以对列选择使用所有常规操作，例如移动选区，替换选区，转置（线），来自文本菜单的操作，通过shell命令过滤选区等。
八、列移动/打字
使用向上/向下箭头键⌥会将插入符号移至当前列的第一行/最后一行。按住⇧将其选中。例如，如果您的列数据如上所示，并且前面有插入符号foo，请按⌥⇧↓键，它会将插入符向前移动，fud并将文本保留在之间foo并将其fud选中。
您现在可能想要按⌥一次切换到零宽度列选择，然后开始输入以在每行上键入。或者使用→→然后→选择整个列（在列模式下）。
九、智能选项卡行为
当在一行的开头使用Tab键时，TextMate会插入尽可能多的制表符，因为它估计对于该行是正确的。如果该行已经有文本，则脱字符将移到本文的前面。
如果该行已经具有正确的缩进（或以上），则将插入单个选项卡。
十、拼写检查
TextMate支持系统范围内的“检查拼写时的拼写”。这可以在编辑→拼写子菜单中更改。
您可以调出拼写错误的单词来获取拼写建议。
由于TextMate适用于结构化文本，因此可以排除文件的部分内容。这是通过创建一个完成的首项在包编辑器，设置spellChecking到0并在填充范围选择与选择的目标为不进行拼写检查。
默认情况下，源代码除了字符串和注释以外，还禁用了拼写检查，还包括HTML，LaTeX，Markdown等中的关键字，标签和类似内容。
十一、使用空格而不是制表符
TextMate可以使用空格而不是制表符。这是通过点击状态栏中的“Tab Size”并启用软标签来完成的。
此设置只会影响当前的语言和所有具有尚未设置选项的公共根目录的语言。这同样适用于拼写检查，软包装和实际标签大小的状态。当启用软标签时，TextMate将在大多数情况下像使用硬标签一样操作，但文档确实包含空格。

㈡ 华为padvscode配置

华为padvscode配置
想要优雅且高效的编写代码，必须熟练使用一款前端开发工具。但前端开发工具数不胜数，像HBuilder、Sublime Text、WebStorm、Visual Studio Code......等等,其中VSCode以其轻量且强大的代码编辑功能和丰富的插件生态系统，独受前端工师的青睐。网上有很多vscode的配置以及使用博客，但都没有本篇那么详细且全面。

软件下载
直接在官网进行下载

Visual Studio Code - Code Editing. Redefined
最近很多人留言说官网下载被限速，如果大家存在这种情况，可以在“前端码头”后台发送vscode获取软件包。

首页

vscode设置成中文
vscode默认的语言是英亮扮春文，对于英文不好的小伙伴可能不太友好。简单几步教大家如何将vscode设置成中文。

按快捷键“Ctrl+Shift+P”。
在“vscode”顶部会出现一个搜索框。
输入“configure language”，然后回车。
“vscode”里面就会打开一个语言配置文件。
将“en-us”修改成“zh-cn”。
按“Ctrl+S”保存设置。
关闭“vscode”，再次打开就可以看到中文界面了。
当然如果你不愿意设置，也可以直接安装它的中文插件，还是很人性化的。

VScode用户设置
1. 打开设置

文件--首选项--设置，打开用户设置。VScode支持选择配置，也支持编辑setting.json文件修敬耐改默认配置。个人更倾向于编写json的方式进行配置，下面会附上我个人的配置代码

这里解析几个常用配置项：

（1）editor.fontsize用来设置字体大小，可以设置editor.fontsize : 14;

（2）files.autoSave这个属性是表示文件是否进行自动保存，推荐设置为onFocusChange——文件焦点变化时自动保存。

（3）editor.tabCompletion用来在出现推荐值时，按下Tab键是否自动填入最佳推荐值，推荐设置为on;

（4）editor.codeActionsOnSave中的source.organizeImports属性，这个属性能够在保存时，自动调整 import 语句相关顺序，能够让你的 import 语句按照字母顺序进行排列，推荐设置为true,即"editor.codeActionsOnSave": { "source.organizeImports": true }；

（5）editor.lineNumbers设置代码行号,即editor.lineNumbers ：true；

我的个人配置，供参考：

{ "files.associations": { "*.vue": "vue", "*.wpy": "vue", "*.wxml": "html", "*.wxss": "css" }, "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe", "git.enableSmartCommit": true, "git.autofetch": true, "emmet.triggerExpansionOnTab": true, "emmet.showAbbreviationSuggestions": true, "emmet.showExpandedAbbreviation": "always", "emmet.includeLanguages": { "vue-html": "html", "vue": "html", "wpy": "html" }, //主题颜色 //"workbench.colorTheme": "Monokai", "git.confirmSync": false, "explorer.confirmDelete": false, "editor.fontSize": 14, "window.zoomLevel": 1, "editor.wordWrap": "on", "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 2, //失去焦点后自动保存 "files.autoSave": "onFocusChange", /缺升/ #值设置为true时，每次保存的时候自动格式化； "editor.formatOnSave": false, //每120行就显示一条线 "editor.rulers": [ ], // 在使用搜索功能时，将这些文件夹/文件排除在外 "search.exclude": { "**/node_moles": true, "**/bower_components": true, "**/target": true, "**/logs": true, }, // 这些文件将不会显示在工作空间中 "files.exclude": { "**/.git": true, "**/.svn": true, "**/.hg": true, "**/CVS": true, "**/.DS_Store": true, "**/*.js": { "when": "$(basename).ts" //ts编译后生成的js文件将不会显示在工作空中 }, "**/node_moles": true }, // #让vue中的js按"prettier"格式进行格式化 "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatter.js": "prettier", "vetur.format.defaultFormatterOptions": { "js-beautify-html": { // #vue组件中html代码格式化样式 "wrap_attributes": "force-aligned", //也可以设置为“auto”，效果会不一样 "wrap_line_length": 200, "end_with_newline": false, "semi": false, "singleQuote": true }, "prettier": { "semi": false, "singleQuote": true } } }
最近经常有人微信问我，这个配置代码写在哪里？

新版的vscode设置默认为UI的设置，而非之前的json设置。如果你想复制我上面这段代码进行配置，可以进行下面的修改

文件>首选项>设置 > 搜索workbench.settings.editor，选中json即可改成json设置；

禁用自动更新

文件 > 首选项 > 设置（macOS：代码 > 首选项 > 设置，搜索update mode并将设置更改为none。

开启代码提示设置

第一步：点击左下角点击设置图标，找到并点击“setting”

第二步：到搜索框里搜索“prevent”--->并取消此项的勾选

常用的快捷键
高效的使用vscode,记住一些常用的快捷键是必不可少的，我给大家罗列了一些日常工作过程中用的多的快捷键。

以下以Windows为主，windows的 Ctrl，mac下换成Command就行了

对于 行 的操作：

重开一行：光标在行尾的话，回车即可；不在行尾，ctrl + enter 向下重开一行；ctrl+shift + enter 则是在上一行重开一行
删除一行：光标没有选择内容时，ctrl + x 剪切一行；ctrl +shift + k 直接删除一行
移动一行：alt + ↑ 向上移动一行；alt + ↓ 向下移动一行
复制一行：shift + alt + ↓ 向下复制一行；shift + alt + ↑ 向上复制一行
ctrl + z 回退

㈢ 如何打造一款属于自己的 Visual Studio Code 颜色主题

Visual Studio Code 是我在最近一年中最喜欢的一款编辑器，微软每一次竖拆的更新都会给大家带来惊喜，更是令人愈加喜欢。之前一直使用内置的颜色主题 Light+ 和 Dark+ ，但近来突然觉得前者颜色区分度不高，一眼看上去就密密麻麻的一对代码，而后者则是被选中的文本背景色太浅，跟编辑器的背景颜色很相似，很难区分出来，于是萌生了要制作一款自己的颜色主题的想法。经过几天的研究，终于捣鼓出来了 Lei Theme 系列颜色主题。

先来看看其中两款主题的效果：

一般来说，我们并不需要重头来制作一款颜色主题，首先需要选择一款自己最喜欢的颜色主题（或者说先找一款与自己的想法最相似的颜色主题），然后在此基础上渣猛进行些许调整即可。另外如果想将颜色主题发布到微软的 Visual Studio Code 扩展商店上，还需要注册一个微软开发者账号，并通过 vsce 工具来发布出去，下文会对此进行详细说明。
tmTheme 格式的颜色主题

TextMate 曾是多年前最流行的代码编辑器之一，其颜色主题的文件后缀为 .tmTheme ，在本文中我们将其简称为 tmTheme 格式。Visual Studio Studio 的颜色主题采用的是标准的 TextMate 主题格式，我们可以参考这篇文章 Writing a TextMate Grammar: Some Lessons Learned ，大概可以理解为这样： 编辑器对代码进行解析后，会为每个元素指定一个 scope ，这个 scope 即表明此元素是一个关键字还是一个常量，又或者是一个标点符号，通过 tmTheme 格式的文件来定义相应 scope 的文字样式。

根据该文章可知道以下是常见的 scope 列表：

comment
constant
constant.character.escape
constant.language
constant.numeric
declaration.section entity.name.section
declaration.tag
deco.folding
entity.name.function
entity.name.tag
entity.name.type
entity.other.attribute-name
entity.other.inherited-class
invalid
invalid.deprecated.trailing-whitespace
keyword
keyword.control.import
keyword.operator.js
markup.heading
markup.list
markup.quote
meta.embedded
meta.preprocessor
meta.section entity.name.section
meta.tag
storage
storage.type.method
string
string source
string.unquoted
support.class
support.constant
support.function
support.type
support.variable
text source
variable
variable.language
variable.other
variable.parameter

以下是一个 tmTheme 格式文件的代码片段：

<dict>
<key>name</key>
<string>Keyword</string>
<key>scope</key>
<string>keyword.control,keyword.other,variable.language,storage.type,storage.modifier,keyword.function</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#0808D1</string>
</dict>如纤桥
</dict>
<dict>
<key>name</key>
<string>Invalid</string>
<key>scope</key>
<string>invalid</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#cd3131</string>
</dict>
</dict>

从上面的代码可以看出，其实这个 tmTheme 格式的文件似乎也挺简单的，然而初学者而言，难的是 不知道 scope 怎么写 ，下文会循序渐进地对此进行说明。
创建颜色主题项目

根据官方文档，我们先执行以下命令安装 Yeoman 代码生成工具来创建一个默认的颜色主题项目：

$ npm install -g yo generator-code

安装完毕之后，进入 ~/.vscode/extensions 目录执行以下命令启动生成器：

$ yo code

说明： ~/.vscode/extensions 表示用户根目录下的 .vscode/extensions 目录，之所以在此处新建项目主要是为了不用发布到扩展商店也可以在本地进行使用，并且方便调试。

选择 New Color Theme 创建颜色主题项目：

_-----_ ╭——————————————————————————╮
| | │ Welcome to the Visual │
|--(o)--| │ Studio Code Extension │
`---------´ │ generator! │
( _´U`_ ) ╰——————————————————————————╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `

? What type of extension do you want to create?
New Extension (TypeScript)
New Extension (javaScript)
❯ New Color Theme
New Language Support
New Code Snippets

接着需要在命令行下交互式地填写一些问题，以下是我在执行过程中填写的内容：

? What type of extension do you want to create? New Color Theme
URL (http, https) or file name of the tmTheme file, e.g., http://www.monokai.nl/blog/wp-content/asdev/Monokai.tmTheme.
? URL or file name: http://www.monokai.nl/blog/wp-content/asdev/Monokai.tmTheme
? What's the name of your extension? my-theme
? What's the identifier of your extension? my-theme
? What's the description of your extension?
? What's your publisher name? leizongmin
? What's the name of your theme shown to the user? my-theme
? Select a base theme: Dark

需要说明的是，第一个问题 URL (http, https) or file name of the tmTheme file 需要提供一个已有的 tmTheme 文件作为基础，此处可直接复制示例中的 URL 。

稍等片刻，工具自动生成了项目之后，会提示我们执行以下命令开始编辑代该项目：

$ cd my-theme
$ code .

以下是生成的项目的文件结构：

.
├—— README.md
├—— package.json （扩展信息文件）
├—— themes
│ └—— Monokai.tmTheme （颜色主题定义文件）
└—— vsc-extension-quickstart.md （帮助文件，上面详细说明操作步骤）

首先看看 package.json 文件：

{
"name": "my-theme",
"displayName": "my-theme",
"description": "",
"version": "0.0.1",
"publisher": "leizongmin",
"engines": {
"vscode": "^1.5.0"
},
"categories": [
"Themes"
],
"contributes": {
"themes": [
{
"label": "my-theme",
"uiTheme": "vs-dark",
"path": "./themes/Monokai.tmTheme"
}
]
}
}

contributes 中定义了此扩展项目包含的内容，其中 themes 表示颜色主题，是一个数组，我们可在此处放入多个颜色主题。以下是 themes 中每个元素的定义：

label 表示颜色主题的名称，即在 Preferences: Color Theme 列表中显示的名称
uiTheme 是指编辑器 UI 的颜色，可选为 vs-light 和 vs-dark ，如果我们的颜色主题是深色系的，就选 vs-dark
path 是 tmTheme 文件的位置

为了避免混淆，我们可以将文件 ./themes/Monokai.tmTheme 改名为 ./themes/my-theme.tmTheme ，并修改 package.json 相应的位置。

现在在 Visual Studio Code 中按快捷键 ⌘Command + Shift + P 打开命令面板（Windows / Linux 系统应为 Ctrl + Shift + P ），输入 Color Theme 并按回车，再中列表中选择 my-theme 按回车即可使用刚刚创建的新颜色主题：

从上图可以看出，这其实就是一个标准的 Monokai 主题。
tmTheme 编辑器

从生成的 vsc-extension-quickstart.md 文件中我们得知有一款 Web 版的在线 tmTheme 编辑器 ，通过该编辑器可以进行可视化地编辑 tmTheme 文件。比如以下视频是更改 String 和 Keyword 颜色的示例：
你的浏览器不支持 标签.

主要的操作方法为：

在左侧 Scope Name 列表中选中一项，然后双击 FG 列上的颜色（FG 表示 foreground，即前景颜色），然后选择要更改的颜色即可，可以看到代码预览区域的颜色会实时改变
点击顶部栏的【Download】按钮即可下载编辑后的 tmTheme 文件，直接将其覆盖项目中的 ./themes/my-theme.tmTheme 文件即可
在 Visual Studio Code 中按快捷键 ⌘Command + Shift + P 打开命令面板，输入 Reload Window 并按回车即可看到修改后的颜色主题

但是，在一些实现细节上，Visual Studio Code 并不与该 tmTheme 编辑器一致，所以我们在该在线编辑器上看到的效果可能与 Visual Studio Code 上稍有不同，所以我们可能还需要直接编辑 tmTheme 文件。
如何知道 scope 是什么

下面是这款主题中，模板字符串的渲染效果：

从图中可以看到，模板字符串中的字符串和变量的颜色都是一样的，而假如我想改变模板字符串中变量的颜色，却是无从下手，因为即使翻遍 TextMate 官方文档中关于 tmTheme 的介绍也找不到模板字符串的 scope 是什么。

其实我们可以借助 Visual Studio Code 的开发者工具来找到任意元素的 scope ，以下是演示视频：
你的浏览器不支持 标签.

从开发者工具中我们可以看到模板字符串中 ${ 的样式是：

token block ts punctuation definition meta string begin function arrow new expr template expression template-expression

而模板变量 file 的样式是：

token block ts meta variable other readwrite string function arrow new expr template expression

再结合文首对于 scope 介绍的文章，我们假设我们要的 scope 名为 template.expression 。接着打开文件 ./themes/my-theme.tmTheme ，仿照该文件的格式，我们添加以下代码在对应位置：

<dict>
<key>name</key>
<string>Template Expression</string>
<key>scope</key>
<string>template.expression</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#23C4FA</string>
</dict>
</dict>

再按快捷键 ⌘Command + Shift + P 打开命令面板，执行 Reload Window ，此时可以看到模板字符串中的变量颜色跟字符串的颜色不一样了：

tmTheme 文件处理规则

尽管已经实现了我们想要的效果，相信阅读到这里的时候很多人还是一头雾水，并不知道为何 scope 是 template.expression 。我在刚开始时虽然也猜想到是像 CSS 的类选择器一样，但还是不太确定，直到阅读到 Visual Studio Code 的源码后才得以印证。

以下是 Visual Studio Code 源码中负责处理 tmTheme 的 scope 的程序文件 src/vs/workbench/services/themes/electron-browser/stylesContributions.ts （ 点此查看完整文件 ）:

export class TokenStylesContribution {

public contributeStyles(themeId: string, themeDocument: IThemeDocument, cssRules: string[]): void {
let theme = new Theme(themeId, themeDocument);
theme.getSettings().forEach((s: IThemeSetting, index, arr) => {
// @martin TS(2.0.2) - s.scope is already a string[] so no need for all this checking.
// However will add a cast at split to keep semantic in case s.scope is wrongly typed.
let scope: string | string[] = s.scope;
let settings = s.settings;
if (scope && settings) {
let rules = Array.isArray(scope) ? <string[]>scope : (scope as string).split(',');
let statements = this._settingsToStatements(settings);
rules.forEach(rule => {
rule = rule.trim().replace(/ /g, '.'); // until we have scope hierarchy in the editor dom: replace spaces with .

cssRules.push(`.monaco-editor.${theme.getSelector()} .token.${rule} { ${statements} }`);
});
}
});
}

private _settingsToStatements(settings: IThemeSettingStyle): string {
let statements: string[] = [];

for (let settingName in settings) {
const value = settings[settingName];
switch (settingName) {
case 'foreground':
let foreground = new Color(value);
statements.push(`color: ${foreground};`);
break;
case 'background':
// do not support background color for now, see bug 18924
//let background = new Color(value);
//statements.push(`background-color: ${background};`);
break;
case 'fontStyle':
let segments = value.split(' ');
segments.forEach(s => {
switch (s) {
case 'italic':
statements.push(`font-style: italic;`);
break;
case 'bold':
statements.push(`font-weight: bold;`);
break;
case 'underline':
statements.push(`text-decoration: underline;`);
break;
}
});
}
}
return statements.join(' ');
}
}

我们再来回顾一下上文 tmTheme 文件每一项 scope 的配置内容：

<dict>
<key>name</key>
<string>Template Expression</string>
<key>scope</key>
<string>template.expression</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>http://www.315nk.com/app/?23C4FA</string>
</dict>
</dict>

其中第一项 name 表示的是我们给该规则起的名称； scope 则是适用的 scope ，如果多个可以用逗号分隔，比如 User-defined constant 的 scope 值就为 constant.character, constant.other ； settings 则是具体的样式信息，比如颜色值。

从源码中可以看出，支持的样式只有 foreground 和 fontStyle ，而 background 则从注释中可以看出由于某原因导致 Visual Studio Code 暂时不支持。

scope 值为 template.expression 则可被认为是 CSS 类选择器 token.template.expression ，在前文的 Developer Tools 的演示视频中，模板字符串的变量名在渲染时其 HTML 为 <span class="token block ts meta variable other readwrite string function arrow new expr template expression">...</span> ，如果我们熟悉 CSS 的话应该能一眼就看出来 .token.template.expression 是会匹配到该标签的。所以，我们可以简单地把 scope 当作是 CSS 的类选择器。

需要注意的是，如果我们在定义 scope 时写得不够详细，可能会错误地匹配到其他元素，致使调好了一部分，另一部分却被调坏了，所以要做得完美也并非易事。
发布到扩展商店

要将扩展发布到扩展商店以便让更多人可以使用到，我们需要借助 vsce 命令行工具，可以参考文档 vsce - Publishing Tool Reference 。以下是其基本步骤：

安装 vsce 命令行工具。执行命令 npm install -g vsce
注册 Visual Studio Team Services 账号，并获取到 Access Token
创建 Publisher。执行命令 vsce create-publisher
登录到 Publisher。执行命令 vsce login
发布扩展。执行命令 vsce publish

详细操作步骤建议参考相应的官方文档。

本文并没有详细到手把手教地去讲解如何打造一款 Visual Studio Code 颜色主题，仅仅是提到了几个我在折腾过程中认为比较关键，而又很难通过文档去查到的要点。爱折腾是程序员的天性，希望本文能让爱折腾的你少走一些弯路，把喜爱的 Visual Studio Code 玩出花来。

㈣ web前端开发用什么软件

对于前端，官方的定义是网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。用自己的话来说，前端是网页给访问网站的人看的内容和页面，那前端开发顾名思义就是这些内容和页面中代码的实现。

现在的前端开发使得现代网页更加美观，交互效果显著，功能更加强大。所以现在的前端开发，运用到的知识面更加广泛，难度也更大。前端开发目前市场需求还是很大的，而且相对来讲比较容易，很适合学习。需要学习的内容也不少，我有全套web前端视频课资料可以发给你自学。

学习内容包括：

①计算机基础以及PS基础

②前端开发基础（HTML5开发、JavaScript基础到高级、jQuery网页特效、Bootstrap框架）

③移动开发

④前端高级开发（ECMAScript6、Veu.js框架开发、webpack、前端页面优化、React框架开发、AngularJS 2.0框架开发等）

⑤小程序开发

⑥全栈开发（MySQL数据库、Python编程语言、Django框架等）

⑦就业拓展（网站SEO与前端安全技术）

互联网行业目前还是最热门的行业之一，学习IT技能之后足够优秀是有机会进入腾讯、阿里、网易等互联网大厂高薪就业的，发展前景非常好，普通人也可以学习。

想要系统学习，你可以考察对比一下开设有相关专业的热门学校，好的学校拥有根据当下企业需求自主研发课程的能力，能够在校期间取得大专或本科学历，中博软件学院、南京课工场、南京北大青鸟等开设相关专业的学校都是不错的，建议实地考察对比一下。

祝你学有所成，望采纳。

㈤ 如何打造一款属于自己的 Visual Studio Code 颜色主题

TextMate曾是多年前最流行的代码编辑器之一，其颜色主题的文件后缀为.tmTheme，在本文中我们将其简称为tmTheme格式。Visual Studio Studio 的颜色主题采用的是标准的 TextMate 主题格式，我们可以参考这篇文章Writing a TextMate Grammar: Some Lessons Learned，大概可以理解为这样：编辑器对代码进行解析后，会为每个元素指定一个scope，这个scope即表明此元素是一个关键字还是一个常量，又或者是一个标点符号，含前差通过tmTheme格式的文件来定义相应scope的文字样式。

根据该文章可知道以下是常见的scope列表：
comment
constant
constant.character.escape
constant.language
constant.numeric
declaration.section entity.name.section
declaration.tag
deco.folding
entity.name.function
entity.name.tag
entity.name.type
entity.other.attribute-name
entity.other.inherited-class
invalid
invalid.deprecated.trailing-whitespace
keyword
keyword.control.import
keyword.operator.js
markup.heading
markup.list
markup.quote
meta.embedded
meta.preprocessor
meta.section entity.name.section
meta.tag
storage
storage.type.method
string
string source
string.unquoted
support.class
support.constant
support.function
support.type
support.variable
text source
variable
variable.language
variable.other
variable.parameter

以下是一个tmTheme格式文件的代码片段：
<dict>
<key>name</key>
<string>Keyword</string>
<key>scope</key>谈皮
<string>keyword.control,keyword.other,variable.language,storage.type,storage.modifier,keyword.function</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#0808D1</string>
</dict>
</dict>
<dict>
<key>name</key>
<string>Invalid</string>
<key>scope</key>
<string>invalid</string>
<key>settings</key>
<dict>
<key>foreground</悔凯key>
<string>#cd3131</string>
</dict>
</dict>

从上面的代码可以看出，其实这个tmTheme格式的文件似乎也挺简单的，然而初学者而言，难的是不知道scope怎么写，下文会循序渐进地对此进行说明。

创建颜色主题项目

根据官方文档，我们先执行以下命令安装Yeoman代码生成工具来创建一个默认的颜色主题项目：
$ npm install -g yo generator-code

安装完毕之后，进入~/.vscode/extensions目录执行以下命令启动生成器：
$ yo code

说明：~/.vscode/extensions表示用户根目录下的.vscode/extensions目录，之所以在此处新建项目主要是为了不用发布到扩展商店也可以在本地进行使用，并且方便调试。

选择New Color Theme创建颜色主题项目：
_-----_ ╭──────────────────────────╮
| | │ Welcome to the Visual │
|--(o)--| │ Studio Code Extension │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `

? What type of extension do you want to create?
New Extension (TypeScript)
New Extension (JavaScript)
❯ New Color Theme
New Language Support
New Code Snippets

接着需要在命令行下交互式地填写一些问题，以下是我在执行过程中填写的内容：
? What type of extension do you want to create? New Color Theme
URL (http, https) or file name of the tmTheme file, e.g., http://www.monokai.nl/blog/wp-content/asdev/Monokai.tmTheme.
? URL or file name: http://www.monokai.nl/blog/wp-content/asdev/Monokai.tmTheme
? What's the name of your extension? my-theme
? What's the identifier of your extension? my-theme
? What's the description of your extension?
? What's your publisher name? leizongmin
? What's the name of your theme shown to the user? my-theme
? Select a base theme: Dark

需要说明的是，第一个问题URL (http, https) or file name of the tmTheme file需要提供一个已有的tmTheme文件作为基础，此处可直接复制示例中的URL。

稍等片刻，工具自动生成了项目之后，会提示我们执行以下命令开始编辑代该项目：
$ cd my-theme
$ code .

以下是生成的项目的文件结构：
.
├── README.md
├── package.json （扩展信息文件）
├── themes
│ └── Monokai.tmTheme （颜色主题定义文件）
└── vsc-extension-quickstart.md （帮助文件，上面详细说明操作步骤）

首先看看package.json文件：
{
"name": "my-theme",
"displayName": "my-theme",
"description": "",
"version": "0.0.1",
"publisher": "leizongmin",
"engines": {
"vscode": "^1.5.0"
},
"categories": [
"Themes"
],
"contributes": {
"themes": [
{
"label": "my-theme",
"uiTheme": "vs-dark",
"path": "./themes/Monokai.tmTheme"
}
]
}
}

contributes中定义了此扩展项目包含的内容，其中themes表示颜色主题，是一个数组，我们可在此处放入多个颜色主题。以下是themes中每个元素的定义：

label表示颜色主题的名称，即在Preferences: Color Theme列表中显示的名称
uiTheme是指编辑器 UI 的颜色，可选为vs-light和vs-dark，如果我们的颜色主题是深色系的，就选vs-dark
path是tmTheme文件的位置

为了避免混淆，我们可以将文件./themes/Monokai.tmTheme改名为./themes/my-theme.tmTheme，并修改package.json相应的位置。

现在在 Visual Studio Code 中按快捷键⌘Command + Shift + P打开命令面板（Windows / Linux 系统应为Ctrl + Shift + P），输入Color Theme并按回车，再中列表中选择my-theme按回车即可使用刚刚创建的新颜色主题

㈥ Sublime Text 2 与 TextMate 2 相比有哪些优缺点

Sublime用了2年，中间也用了一段时间TextMate。现在用ST做主力（付费用户），原因如下：

1. ST用起来体感比Textmate快
2. ST的Layout在大显示器上非常方便
3. 快速浏览文件的特性很贴心。
4. 根据Project类型来定义ST对我这种一会前端，一会后台的开发者来说很方便，也便于重用或团队复用。

结合困逗乱上Grunt，除了没有真正的Intelisense和Debug能力，已经很汪档接近一个指隐全功能的IDE了，而且速度飞快。

㈦ 什么代码编辑器比较好用

著名的代码编辑器：Microsoft Visual Studio Code、Github Atom、Sublime text、Adobe Brackets

最推荐的一种：Atom

推荐理由：

链接：如何评价 GitHub 发布的文本编辑器 Atom？

作者：韦易笑

用过不少编辑器：UltraEdit / EditPlus / (G) Vim / GEdit / NotePad++ / TextMate / ProgrammerPad / Sublime 。确实是工作上用他们写过代码的。而 VSC / Emacs 只是体验了一下基本使用方法，算不上真用。用下来的结论是：Atom 比 Vim 更 Vim，比 Emacs 更 Emacs，同样，比 Sublime 更 Sublime。


Atom 唯一的槽点就是“卡”，不过那是去年的情况了，1.0后性能数次大提升，比起sublime/vsc之类虽不算流畅，但同时编辑20个数千行的文件没有压力。如今让人感觉慢的地方主要是启动loading（也大大短于eclipse, idea），使用时并没察觉它比其他编辑器慢再哪。而文本编辑器的快慢，更重要的是“让你工作更快更有效率”。下面说说为何 Atom比其他更有效率：


兼容VIM模式


这无疑团结了一大班 Vim过来的用户，Sublime虽然也有VIM模式，但是Sublime在 mac下面的vim模式有bug，我习惯用 hjkl来移动光标，sublime再mac下hjkl移动有问题，且我习惯CTRL_[来返回NORMAL，手指不离开主键盘区，而sublime的vim模式只支持ESC返回，加上其作者经常神秘消失，最稳定的2.x版本已三年没有更新，这些问题一直得不到修正。


由于Atom的定制程度直追 Vim/Emacs，它的vim模式能够使用插件来实现，而不像sublime必须builtin，Atom的VIM模式除了官方实现外还有很多用户实现，各有所长，你不喜欢可以换，Sublime就傻逼了，觉得builtin的不行，你就没办法了，而且作者不更新你也没办法。


Atom里的Vim模式并不是强制的，你可以用也可以不用，这样入门用户也不会觉得困难，但是如果你用惯Vim的话，使用Vim模式可以取得更好的效率，我觉得Vim/Atom-VimMode能够提升效率的地方有以下三方面：


1. 手指不离开主键盘区：

所有功能皆能在主键盘区完成，不用去按方向键，不用把手挪去按Home/End，更不用动鼠标。就像咏春中强调中线理论，认为一切动作围绕中轴线开展，守护自己中轴线的同时攻击别人的中轴线。Vim/Atom-VimMode中，双手不但从不离开主键盘，并且八根手指随时守护再HOME位（ASDF, JKL;）有动作就移动，然后马上归位。


2. 细粒度微操作：

星际/dota玩的好，微操基本功，微操又快又精确，Vim/Atom-VimMode一样，比如：

if (xxxx) {}

很多人编码时习惯“成对编码”，写了申请资源的代码，先把释放资源写了，写了左括号，先把右括号给补充完，当你写完第二行代码时，需要用到“再1-2行中间插入一行”，此时你的光标停留在第二行，传统编辑器你需要：按上箭头移动光标到第一行 -> 按END键去到第一行末尾 -> 按回车插入一行，mac下的END键还需要用CMD+右来组合出来，而Vim/Atom-VimMode中，你只需要shift+o即可，手指完全不离开主键盘区，不用像传统编辑器那样，右手先移动到箭头区又移动到HOME的小键盘区，再移动回主键盘区这么麻烦，类似还有：

使用o直接再下一行插入，避免 END/回车

使用I再行首插入，避免移动半天光标。

向前/后移动一个单词到单词头、尾。

快速更改当前单词，用/来快速搜索移动光标。

dd+p来快速移动代码块，取代shift+方向键半天。

shift-j 来两行合并成一行，代替 HOME, back 若干次。

。。。

你再编辑代码的时候，90%的情况可以直接一步完成，这就叫细粒度微操，而且整个过程手都不需要离开主键盘，不像传统编辑器那样，若干笨重的操作组合再一起，操作不够细步骤多的同时手还要再：主键盘区，方向键区，扩展键区 来回移动，效率奇低。而Vim/Atom-VimMode下，手指随时守护在home区（ASDF JKL；），所有微操都是围绕HOME区进行，不会移动到任何主键盘以外的区域，更别说用鼠标、触摸板。


3. 批量操作：

比如要给下面代码每行后面加一个分号：

var x = 1var y = 2var z = 3console.log('result is ' + (x + y + z).toString())

一般做法是：移动光标到行末->END->分号->移动光标到下一行，Vim里面不需要移动光标到行末，只需循环敲入：“A;<ESC>j” 即可，本来操作就少很多。这还不是最少操作，更少操作是利用Vim里面的句号“.”功能重复上一次操作，即第一行“A;”补充了一个分号后，第二行只需要按一下"."即可重复，于是最后操作变为：

第一行：A;<ESC>

后面所有行：J.


超级爽快的操作，这样的操作还很多，你还可以单条命令对一万行代码重复上述步骤，或者把c代码拷贝到go里面先一句话把所有分号给删除了。Vim下面的名言：绝不重复。


总之如果你熟悉 VIM模式，用 Atom能感到完全自由的方式，随心所欲的书写代码，而不是被书写这件事情费脑筋，解放大脑完全用于思考而不用于打字。但是同时对不习惯VIM的人照样友好，或者对想使用VIM的便利却又痛恨VIM这个软件的简陋的人带来了福音。


脊椎记忆


“同样动作重复300次，肌肉就会有记忆，而一个动作重复600次，脊椎就会有记忆”
-- 李小龙


编辑器就是关于脊柱记忆的东西，所以多投入一些时间去了解你使用的编辑器，掌握他们的各种快捷操作和高级功能是一个能让你事半功倍的好主意。


格斗游戏玩的好的人有很多，下等高手靠熟练，中等高手靠反应，上等高手靠意识。更熟练的掌握你的编辑器，让更多日常工作固化成记忆记录再你的脊椎上，使用的时候，脊椎这枚协处理器就能完成代码编写，一个操作，刚一想到，脊椎就自动执行出来了，小脑腾出空间来组织判断，大脑腾出空间来思考更重要的东西，就像你走路，你不用思考迈腿那么自然，别人一拳过来，你潜意识一动，一连串动作就出去了，一只飞蛾飞过来，你潜意识的闭上眼睛保护眼部，这就是脊椎记忆，如果还要经过大脑绕一圈，反应慢不说，大脑这颗cpu都用在这些琐事上了，思考的时间自然少了不少。


所以从内到外的了解你的编辑器，并且熟练掌握他们，是对你提高工作效率的最佳投资，Atom的全平台支持，开放源代码，深度可定制等三个特点，比起其他闭源的，平台支持不全的，扩展少的编辑器来说能让你有不同层面的了解机会，同时为你提供足够的空间。


深度可定制系统


Vim/Emacs的精髓在于：“可以调教”，本来不顺手的东西，只要容易调教，假以时日，都会慢慢变得越来越顺手，越来越“懂你”，越来越“贴心”，以至于后面大家都离不开它了。而 Atom 也同样是一款容易被你调教的编辑器。先前给vim写过插件，给sublime写过插件，如今给Atom写过插件，横向对比下来，几个结论：


插件能做事情多少：Atom > Vim >> sublime

插件开发学习门槛：Vim > Atom > sublime

插件开发文档丰富：Atom > sublime >> Vim


Atom 的定制化程度远远高过sublime之类（不用实际看法，看看双方开发文档即可），直追 Vim / Emacs，sublime的大部分定制无外乎改改json，插件能做的事情相当有限。


Atom 的定制化系统主要有三方面：


1. 细致：

设计之初就考虑的事情，方方面面都能定制，见官方文档，以及插件：vim-mode，minimap （稍微了解下这两个类似的功能再 Atom 和 sublime的实现就能知道 sublime被甩了多少条街了）。可以细粒度的控制编辑器内所有行为，小到移动一下光标，删除当前一个字符，大到打开一个面板，比如 “core:more-up” 可以向上移动一行光标，“window:focus-pane-on-left” 可以把焦点设置到左边的面板，atom内核和大量第一方第三方packages 都是以命令的方式把基础功能提供出来，你可以随意互相调用或者设置热键。

除去命令外的API层面，几乎每个部件每个像素点都可控，比如这样的插件你永远无法再 Vim / Emacs / Sublime 下面见得到：activate-power-mode。


2. 直观：

由于使用 javascript/coffee进行开发，但 javascript/coffee是属于即便你没写过他们，读都能读得懂，VimScript就不一样了，虽然也能做相同的事情，但实话实说，晦涩难写，比如我要取得当前文件的路径和文件名，在 VimScript里面需要这么写：

let l:path = expand('%:p:h')let l:name = expand('%:t:r') 或者 let l:name = expand('%<')

而在 Atom 里我们用atom自己的功能直接取出路径来，然后进行切割：

var fullpath =atom.workspace.getActiveTextEditor().getPath();var filename = path.basename(fullpath);var filepath = path.dirname(fullpath);

就问大家一下？哪段代码更友好直观？你一眼就知道在做什么？你更愿意用按照哪段代码进行插件开发？是上面的VimScript？还是下面的 javascript ？


结论是很清晰的，Atom的 javascript开发插件更简单直观，即便没文档，看别人怎么写的自己也会了，同时灵活性大大高于VmScript，各种事件处理回调，javascript天生擅长做这些事情，还有第二行，第三行，我们用到了 node.js 的 path模块，进行文件路径切割。这样的写法，再VimScript 里面基本是无法想象的。


Vim是强大，但是毕竟是30年前的东西了，即便最熟练的 Vimer 也都承认 VimScript 的晦涩难懂，阻碍了很多人为其开发插件。而给Atom开发插件，只需要掌握javascript，掌握 javascript的人很多，学习了javascript你也可以用在很多地方。不像VimScript那样只能用在Vim里面，而正因为其晦涩，Vim新版本开始支持内嵌 python的写法：

python << EOF
import random
print random.randint(0,10)EOF


VimScript中 Python等动态的支持正是说明其开发维护者也承认 VimScript本身的古老，对比现代编程语言已经有些格格不入了，缺乏强大的描述能力，难以构建复杂的功能模块，才会去支持Python内嵌这样的写法。可大量的工作还是需要再Python之外完成，同时，并非所有平台自带的Vim都支持python，除了mac外，所有debian / ubuntu 发行版自带的Vim都不支持 Python。导致你想写一个通用的扩展还得判断下是否 has('python') 没有的话老老实实用 VimScript 去实现它，这不是折磨人么？


Sublime里面可以用原生 Python 写扩展，比 VimScript爽，但是 sublime 的插件能做的事情还不及VimScript的一半，所以怎么能指望他们能写出高端的功能来呢？


3. 强大：

Atom的内核 Electron （原来的 Atom-shell）可以理解成：Chromium + Node.JS，而整个Atom的界面，你可以理解成就是一颗 HTML 的 DOM 树结构，这意味着你可以这样：

var div = document.createElement("div"); div.innerText = "abc"; atom.workspace.addBottomPanel(div);

就可以简单的在 atom 里面增加一个显示对象，这意味着再给div加个 html的 onclick就可以实现GUI交互，界面上的对象随便写点html代码就可以控制效果，意味着你可以使用 jQuery 来为atom增加新面板，意味着你只需要写一个简单的 .css 文件就可以把 Atom 整个编辑器的外观给修改了。这在 Vim/Emacs 中是几乎不可想象的事情，sublime基本就别提了。


大量的前端开发技术和 Node.JS 基础模块供你任意使用，正是由于近年 Chromium / node.js 系列技术的成熟，和 Atom / Visual Studio Code 这类基于前端技术的客户端软件的成功，让我看到了客户端（桌面+移动）软件开发的新方向。


做VIM/Emacs不能做的事情


Vim/Emacs过去给人的映像是：几乎能做任何事情，确实如此，但毕竟是二三十年前的东西了，而他们一直坚挺到现在一方面是操作便利，更重要的是这么长时间还没有出现一款又开源又具备同样操作便利性和可扩展性的编辑器，所以Vimer, Emacser 们最乐意展示给别人看的就是他们又安装了什么插件，急于展示可以把 Vim / Emacs 装扮成了一个多像 IDE 的东西，而今天这个“可以做任何事情”的高度可定制特性已经被Atom所吸收并完全超越，就像 Atom 的开发blog：“ Introcing Atom” 上说的一样，对易用性和可展性 “决不妥协” ：

We think we can do better. Our goal is a zero-compromise combination of hackability and usability: an editor that will be welcoming to an elementary school student on their first day learning to code, but also a tool they won't outgrow as they develop into seasoned hackers.


抛开易用性的这个 Atom 的明显优势不说，前面其实已说了不少 Atom 比 Vim/Emacs 更灵活强大的地方，可能有些人还有疑惑，不是说 Emacs “没有不能做的事情” 么？你看 Atom的面板里面可以嵌入一个 Terminal，Vim/Emacs一样可以嵌入啊，为何还说 Atom 比它强啊？


没错，Vim用久了会产生心理舒适区，多模式编辑使人神清气爽，命令化文本处理让你赏心悦目，但是受限于本身机制用久了会容易痛苦挣扎：虽然vim的各种扩展似乎什么事情都能做，但每个扩展却只能做到70分，总有那么30%的地方做不到位。所以用的时间长了，上半身爽的要死，下半身痛不欲生。。。。


Vim/Emacs即便大部分扩展功能也都可以称为“能用”，可几十年的历史包袱太沉，很多事情对他们来讲就是禁区，比如诡异的标签功能，容易误操作的buffer/窗口切换，缺乏异步机制，编译时间长只有傻等着，无法跟Atom一样边读代码，边运行程序看结果，对照输出结果和源代码找问题，连实现个内嵌终端都用了若干年，还实现的那么别扭。。。。。。。。。


这类硬伤有许多，再举个最简单的例子，minimap，就是 sublime那种大家喜欢的文档缩略图，这个现代编辑器必备的功能，谁能用 Vim/Emacs 实现一下看看？Atom 可以衍生出 Visual Studio Code 这样漂亮的编辑器，Vim/Emacs能衍生么？Atom可以随便用各种先进的前端技术，不当可以嵌 Terminal我甚至可以再 Atom 嵌入一个 js版本的 DOSBOX 玩老游戏《命令与征服》：

https://archive.org/details/softwarelibrary_msdos_games

Play DOS games online


当然这样并没有任何卯用，但是如果在 Atom里面内嵌一个浏览器，方便的实时预览html/css的效果呢？或者 Atom 里面内嵌一个 Markdown Previewer ，实时查看 Markdown 的效果呢？请问 Vim/Emacs 里怎么实现法？


Atom插件演示：markdown实时预览，左边写右边即时更新，100%兼容github的markdown语法


短短两年的时间，这么多优秀的插件，只想说，如今 Atom 作为 Vim/Emacs 的继承者和超越者出现了，所以社区对 Atom 的反应也是热烈的，看看下面一组数据，截止今天（2016年3月15日），Atom共有扩展插件 3500+ 个，发布不到两年的时间，这是什么概念呢？

㈧ sublime text 怎么添加python

Sublime Text 3 (ST3) 是一个轻量级的跨平台文字编辑器，尤以其轻快的速度，易用性和强大的社区支持而著称。它一经面世便被认为是一个杰出的编辑器，而它真正的强大之处在于你可以使用 Package Control 来增加它的功能以及可以进行各种自定义设置。
在本文章中，我们将会看到如何将 Sublime Text 打造成为 Python 的全栈开发环境(从前端到后端)，如何通过自定义主题和插件来增强它的基本功能，并且还将会涉及到很多使 ST3 变得更加强大的常用的命令，特性以及快捷键。

本教程将假定你使用的是 Mac 电脑并且习惯于使用终端。如果你使用的是 Windows 或者 Linux 操作系统，本文涉及到的一些命令将有可能会有所不同，但是你应该仍然可以很容易地通过 Google 来获取到与本教程相关的解答。
在我们开始之前，让我们先讨论一下我所谓的”全栈”具体指的是什么。
在现在的 HTML5 以及移动设备开发中，Javascript 简直无处不在。是的，无处不在！仅仅使用 Python 基于某个框架比如 Django 或者 Flask 进行开发是不够的。如果你想从始至终真正的自己开发一个网站的话，你必须熟悉 Javascript(以及 Javascript 的一大堆的框架)，REST API(含状态传输 API)，响应式设计，当然还有 HTML 和 CSS，以及其他许多东西。现在让我们来面对一个问题：就像其他任何一个手艺人一样，为了成为一个最厉害的程序员，你的工具必须犀利，你的开发环境必须被打造成全栈开发——那就是我们马上将要开始的工作…
特性
让我们从 ST3 的一些默认特性开始着手吧…
Split Layouts 允许你将你的许多文件放到很多分割开来的视窗中。如果你正在进行以测试为目的的开发(将 Python 代码放在一个视窗中，而测试脚本放在另一个视窗中)或者正在进行前端开发(将 HTML 代码放在一个视窗里，CSS/Javascript 代码放在另一个视窗里)的时候将会非常有用。
Vintage Mode 让你能够在 ST3 中使用 vi 模式。
Chrome-like Tabs 让你在多个文件中切换变得更加方便。
Automatic loading of the last session 帮你自动打开你上次关闭的时候编辑器中所有打开的文件。我总是一直开着 ST3，而且其中打开着一大堆项目——当我重启电脑以后， 它能够自动帮我打开所有的这些文件和文件夹。
Code Snippets 允许你通过一两个简单的关键字就能写出一段常用的代码片(Snippets)，从而增加你的生产效率。比如，你只需要打开一个文件，输入 “lorem” 然后敲击 tab 键，就会自动生成一段乱数假文(译者注： 一种用于测试文章或文字在不同字型、版型下看起来的效果等的文字)。又比如在 Python 代码中，你可以输入 “defs” 然后敲击 tab 键，你就能得到一段通用的函数定义。
同时，你还可以点击 Tools > New Snippet 来创建属于你自己的代码片。请参照这个 文档来获取帮助，也可以在 这里 查看我个人用到的一些 snippets。
自定义 Sublime Text 3
在你下载完 ST3 以后…
在命令行中添加 subl 命令
就像 TextMate 的 mate 命令一样，Sublime Text 拥有一个叫做 subl 的命令行工具，可以用来通过终端打开一个文件或者一整个文件夹。
你需要建立一个指向 subl 二进制文件的符号链接来使 subl 命令有效：

Python

1

$ ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" ~/bin/subl

尝试使用以下命令来打开 Sublime 来确保链接生效了：

Python

1

$ subl

如果以上命令没有效果，你可能需要将 /bin 添加到你的环境变量中：

Python

1

$ echo "export PATH=~/bin:$PATH" &gt;&gt; ~/.profile

然后重新尝试第一步。
如果你仍然遇到问题，尝试查看 这篇 文章来获取帮助。 或者你可以看看如何在 Windows和 Linux 中建立符号链接。
现在你就可以通过下述命令来打开文件或者文件夹了：

Python

1
2
3
4
5
6
7
8

# open the current directory
$ subl .

# open a directory called tests
$ subl ~/Documents/test

# open a file called text.txt
$ subl test.txt

如果路径中含有空格，你必须使用双引号将路径括起来：

Python

1

$ subl "~/Documents/test/my test file.txt"

想要查询所有可用的命令，请打开帮助文件：

Python

1

$ subl --help

安装 Package Control
为了使用众多的 插件 来扩展 Sublime 的功能，你需要安装一个叫做 Package Control 的插件管理器——这个东西你必须要手动安装。但是一旦你安装好了以后，你就可以使用 Package Control 来安装，移除或者升级所有的 ST3 插件了。
点击 这里 从 Sublime Text 3 官方获取用于安装的代码。依次点击 View > Show Console 打开 ST3 的控制台。在控制台中粘贴刚才的代码，然后点击回车。最后重启 ST3。
现在你可以通过快捷键 cmd+shift+P 打开 Package Control 来安装其他的插件了。输入 install 然后你就能看见屏幕上出现了 Package Control: Install Package，点击回车然后搜索你想要的插件。
其他一些相关命令如下：
List Packages 显示所有已安装的插件
Remove Packages 移除一个指定的插件
Upgrade Package 更新一个指定的插件
Upgrade/Overwrite All Packages 更新所有已安装的插件
请查阅官方 文档 获取更多的命令。

创建自定义配置文件
你可以通过一个基于 JSON 的配置文件来充分的自定义 Sublime Text，这使得转移或者同步你的自定义文件到另一个系统变得非常容易。首先，我们需要新建我们自己的配置文件。我们最好是为不同的系统环境和编程语言各自创建一个配置文件。
依次点击 Sublime Text > Preferences > Settings – User 来创建一个配置文件。在该文件中添加一个空的 JSON 类然后就可以在其中写入你的配置内容了。如下所示：

Python

1
2
3
4
5
6
7

{
// base settings
"auto_complete": false,
"sublimelinter": false,
"tab_size": 2,
"word_wrap": true
}

如果想为特定的编程语言新建配置文件的话，请点击 Sublime Text > Preferences > Settings – More > Syntax Specific – User。然后按照 LANGUAGE.sublime-settings 的格式保存该配置文件。例如想新建一个 Python 专用的配置文件，请将该文件保存为 Python.sublime-settings。
你完全可以按照你自己的喜好来进行各项配置；不过我强烈推荐以我的这份 配置文件 以及 Python 配置 作为基础，然后修改成你所需要的内容。
一个可选项: 你可以使用 Dropbox 来同步你的所有配置。你只需要将你的配置文件上传到 Dropbox 然后就可以将你的配置同步到你的任意一台设备上了。
你可以在 Sublime Text Unofficial Documentation 找到一些非常好的参考配置。
主题
ST3 为你提供了完全自定义化一个适合自己主题的能力。当然，你如果不是那么的挑剔的话，你可以通过 Package Control 从许许多多的由 Sublime 社区设计的 主题 中下载一个。 在下载之前你可以通过 ColorSublime 来预览这些主题。
广受欢迎的的 Soda Dark 和极简风格的 Flatland 是我个人最喜欢的两个主题。
在安装完了主题以后, 请务必更新你的配置文件. Sublime Text > Preferences > Settings – User：

Python

1
2
3
4

{
"theme": "Flatland Dark.sublime-theme",
"color_scheme": "Packages/Theme - Flatland/Flatland Dark.tmTheme"
}

插件
除了那些主题以外，我还会使用以下这一些插件来提升我的工作效率。
SideBarEnhancements
SideBarEnhancements 扩展了侧边栏中菜单选项的数量，从而提升你的工作效率。诸如”New file” 和 “Duplicate” 这样的选项对于 ST3 来说实在是太重要了, 我甚至觉得 ST3 本来就应该提供这些功能。而且仅凭 “Delete” 这一个功能就让这个插件值得下载。这个功能将你会在你删除文件的时候把它放入回收站。虽然这个功能乍一看没什么用，但是当你没有使用这样的功能而彻底删除了一个文件的时候，除非你用了版本管理软件，否则你将很难恢复这个文件。

现在就下载吧！
Anaconda
Anaconda 是一个终极 Python 插件。它为 ST3 增添了多项 IDE 类似的功能，例如：
Autocompletion 自动完成，该选项默认开启，同时提供多种配置选项。
Code linting 使用支持 pep8 标准的 PyLint 或者 PyFlakes。因为我个人使用的是另外的 linting 工具，所以我会在 Anaconda 的配置文件 Anaconda.sublime-settings中将 linting 完全禁用。操作如下: Sublime > Preferences > Package Settings > Anaconda > Settings – User： {"anaconda_linting": false}
McCabe code complexity checker 让你可以在特定的文件中使用 McCabe complexity checker. 如果你对软件复杂度检查工具不太熟悉的话，请务必先浏览上边的链接。
Goto Definitions 能够在你的整个工程中查找并且显示任意一个变量，函数，或者类的定义。
Find Usage 能够快速的查找某个变量，函数或者类在某个特定文件中的什么地方被使用了。
Show Documentation： 能够显示一个函数或者类的说明性字符串(当然，是在定义了字符串的情况下)

你可以在这里，或者通过 ST3 的 Package Settings: Sublime Text > Preferences > Package Settings > Anaconda > README 来查看所有这些特性。
SublimeCodeIntel 是另外一个非常流行的插件，它的许多特性与 Anaconda 类似。我建议同时也试试它。
Djaneiro
Djaneiro 支持 Django 模版和关键字高亮以及许多实用的代码片(snippets)功能。其中的 snippets 绝对是省时神器。你可以通过很少几个关键字就能创建许多常见的 Django 代码块比如 templates，models，forms，以及 views。请查看官方文档获取 snippets 列表。
我个人非常喜欢的以下两个用于创建 template 的代码片：输入 var 就可以新建 {{ }}，而输入 tag 就能新建 {% %}。
requirementstxt
Requirementstxt 可以为你的 requirements.txt 文件提供自动补全，语法高亮以及版本管理功能。
SublimeLinter
SublimeLinter 是 ST3 的一个代码静态检查工具框架(linter)。这个插件本身来说并不包含任何的一个 linter，但是你可以通过在 Package Control 中输入 SublimeLinter-[linter_name] 的方式来安装一个 linter。你可以点击这里查看官方的 linter。同时你还可以在 Package Control 中查看到许多的第三方 linter。请点击这里查看安装说明。
对于 Python 的代码静态检查器，我建议使用 SublimeLinter-pyflakes 和 SublimeLinter-pep8。
与此同时，我也会使用 SublimeLinter-jshint, SublimeLinter-pyyaml, SublimeLinter-csslint，SublimeLinter-html-tidy，以及 SublimeLinter-json。
以上大多数的 linter 都需要先安装一些依赖库才能使用，所以在安装前请务必阅读他们的安装说明。
你可以通过修改用户自定义的 SublimeLinter.sublime-settings 文件来对你的每个 linter 个性化：Sublime Text > Preferences > Package Settings > SublimeLinter > Settings – User. 例如我通过以下代码来忽略 pep8 中的错误和警告：

Python

1
2
3
4
5
6
7
8

"pep8": {
"@disable": false,
"args": [],
"excludes": [],
"ignore": "E501,C0301,W0142,W0402,R0201,E1101,E1102,C0103,R0901,R0903,R0904,C1001,W0223,W0232,W0201,E1103,R0801,C0111",
"max-line-length": 100,
"select": ""
},

GitGutter
GitGutter 让 ST3 能在左边栏的位置显示一个小图标，用以表示在最后一次提交以后，代码是否有追加，修改或者删除。

如果你想让该插件支持分布式的版本管理软件(Git，SVN，Bazaar 和 Mercurial)。请查看 Modific。
FTPSync
FTPSync 能够将你的项目和远程文件进行同步。你只需要打开文件便可以下载更新(如果你的远端文件比本地更加新的话)，而且如果你对本地文件做出了修改可以立即同步到远程服务器。这是非常棒的同步本地文件和远程文件的方法。你可以通过以下的方法来添加你的远程服务器：Sublime Text > Preferences > Package Settings > FTPSync > Setup FTPSync.
Sample settings:

Python

1
2
3
4
5
6
7
8
9
10
11

{
'primary': {
host: 'ftp.mywebsite.com',
username: 'johnsmith',
password: 'secretpassword',
path: '/www/',

upload_on_save: true,
tls: true
}
}

我个人喜欢把密码设为 null 因为我不想让我的密码出现在配置文件中。这样 FTPSync 会在我每次保存完文件后要求我输入密码。
AdvancedNewFile
AdvancedNewFile 可以让你在 ST3 中使用简单的几个快捷键便创建一个新的文件夹或者一个新的文件：
你只需要通过几个快捷键便可以打开 AdvancedNewFile 的输入框。然后输入路径和文件名。当你按下回车键后，文件便被创建了。除此之外，如果目标文件夹并不存在的话，该文件夹将会被自动建立。在默认情况下，你创建的文件的路径将会显示在状态栏中。
请查看 Github 上的这篇文档来获取更为详细的使用说明。特别建议请详细阅读TAB自动补全(Tab Completion)以及预定义别名(Predefined Aliases)部分。
我把“cmd+n”设置为了通过 AdvancedNewFile 创建新文件的快捷方式。该快捷键可以通过修改 Key Bindings – User file 来实现 Sublime Text > Preferences > Package Settings > AdvancedNewFile > Key Bindings – User：

Python

1
2
3

[
{ "keys": ["cmd+n"], "command": "advanced_new_file_new"}
]

你也可以更改默认打开的文件夹路径：Sublime Text > Preferences > Package Settings > AdvancedNewFile > Settings – User

Python

1

{"default_initial": "/Users/michaelherman/Documents/repos"}

这样我创建新文件的时候，/Users/michaelherman/Documents/repos将会自动被添加到路径最前方，因为99%的情况下我都会把我的脚本放在这个路径下。
Emmet
Emmet，以前叫做 Zen Coding，让你可以通过简单的缩写来创建 HTML 或者 CSS 的代码块。
例如，你只需要输入感叹号!，然后按下 tab 键，便可以在一个 HTML 文件中创建一段带有几个基本标签的 HTML5 文档类型的代码：

Python

1
2
3
4
5
6
7
8
9
10

&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;/body&gt;
&lt;/html&gt;

请查看官方文档或者速查手册获取更多信息。
Markdown Preview
Markdown Preview 可以用来预览和编译 markdown 文件。
你可以打开 Package Manager 然后输入 Markdown Preview 来查看可用的命令：
Markdown Preview: Python Mrakdown: 在浏览器中预览
Markdown Preview: Python Mrakdown: 导出 HTML 文件
Markdown Preview: Python Mrakdown: 拷贝到剪贴板
Markdown Preview: Github风格Markdown: 在浏览器中预览
Markdown Preview: Github风格Markdown: 导出 HTML 文件
Markdown Preview: Github风格Markdown: 拷贝到剪贴板
Markdown Preview: 打开Markdown速查手册
一旦你完成转换，你之后的所有保存都会立即反映到转换的文件中。
快捷键
跳转到任意内容 (“cmd+p”) 用来快速查找和打开文件。你仅仅只需要工程中文件的一部分路径或者文件名你就可以很容易的打开这个文件。这在一个大型的 Django 工程中显得非常方便。
跳转到指定行 (“ctrl+g”) 让你在当前文件中跳转到指定行数。
跳转到标志 (“cmd+r”) 可以列出当前文件中所有的函数或者类，让你更方便查找。你可以通过输入关键字来查找你所需要的函数或者类。
跳转到行首 (cmd+left-arrow-key) 与 跳转到行尾 (cmd+right-arrow-key)
删除当前行(ctrl+shift+k)
多重编辑 是我迄今为止最喜欢的快捷键

Python

1
2

1.选定一个单词，点击 **“cmd+d”** 来选择同样的单词，再次点击 **“cmd+d”** 继续选择下一个单词…
2.或者 **“cmd+单击”** 来指定多个你想要同时修改的地方。

块编辑 (option+left-mouse-click) 用于选择一整块的内容。通常在整理 CSV 文件的时候用于删除空白内容。
如果想了解更多关于快捷键的内容，请看一下这篇文章。
自定义命令
你可以很容易地使用 Python 来编辑你自己的自定义命令和快捷键组合。目前我个人使用的有以下这些：
拷贝当前文件路径到剪贴板 – 链接
关闭除当前活动标签页以外的所有其他标签页 – 链接
通过文件选项打开你的 Package 文件夹(Sublime > Preferences > Browse Packages)，然后打开 User 文件夹，接下来将上述的 Python 文件添加到 “/Sublime Text 3/Packages/User” 文件夹中。最后请在 Key Bindings – User file (Sublime Text > Preferences > Package Settings > AdvancedNewFile > Key Bindings – User) 文件中完成快捷键绑定。

Python

1
2
3
4
5
6
7
8
9
10
11
12

[
// Copy file name
{
"keys": ["cmd+shift+c"],
"command": "_path_to_clipboard"
},
// Close all other tabs
{
"keys": ["cmd+alt+w"],
"command": "close_tabs"
}
]

㈨ vscode使用教程是

vscode使用教程：

安装：

安装的东西没什么好说的，自行下载安装吧，伙计。

配置：

用户配置：

vscode的用户配置分3个级别，分别是默认配置、全局配置和工作区配置，优先级也依次递增。对于团队项目，一些规范可以通过项目目录下建一个.vscode/setting.json文件进行配置。

快捷键绑定：

参考官方文档，文档中列出了所有指令对应的快捷键。快捷键我只修改了两个与系统软件冲突的。

代码片段：

这个功能很像webstorm的live template的功能，虽然提示的时候没有webstorm那么精准和顺手，不过总的来说，够用。

设置语法遵循TextMate代码片段语法，你可以通过安装别人写好的snippet插件，如果别人写的snippet你用得不爽，那么自己写也简单。

之前使用这个代码片段有个痛点就是只能用方向键上下选择提示，如果能使用ctrl+n/p上下选择的话就更舒服了，没想到现在已经支持了。

另外，有没有人知道怎么设置代码提示内容，比如输入result提示了XPathResult是什么鬼。

插件：

4个月前刚知道vscode的时候，那时感觉插件还没有那么多，现在重新看了一下，真是应有尽有。牛逼啊！

这里介绍几个我用过觉得不错的插件

用户配置同步 Visual Studio Code Settings Sync。Git 历史 Git History。

文件图标 vscode-icons。缩进辅助线 Guides。

Visual Studio Code（以下简称vscode）是一个轻量且强大的代码编辑器，支持Windows，OS X和Linux。

内置JavaScript、TypeScript和Node.js支持，而且拥有丰富的插件生态系统，可通过安装插件来支持C++、C#、Python、PHP等其他语言。

阅读全文

与textmate2安装json相关的资料

热点内容
java会出现内存泄露么 浏览：617
苹果4s锁屏后怎么还显示歌曲 浏览：207
鸿蒙系统文件管理哪些可以删除 浏览：550
ubuntuqt创建工程没有配置文件 浏览：126
网站登录变成其他网站怎么处理 浏览：202
ug数控编程学校有哪些 浏览：203
java图片上传显示 浏览：402
ppt的文件名后缀 浏览：902
ug编程软件下载到哪个盘 浏览：359
炫酷字体APP下载的文件在哪里 浏览：668
廊坊哪里有少儿编程机构 浏览：312
cad新文件能找回来吗 浏览：951
导出手机qq文件到u盘 浏览：456
电脑如何打开ppt文件怎么打开方式 浏览：782
魅族锁定区文件夹 浏览：357
刻字cnc怎么编程 浏览：182
学校的网络拓扑结构图 浏览：784
收集100个pdf文件里关键词 浏览：594
苹果关闭4g网络设置 浏览：289
如何监测数据库 浏览：967

友情链接