atom代码预览插件

tech2023-06-05 117

atom代码预览插件

In this article, I’ll introduce some packages for the code editor Atom, useful for previewing changes as you type (particularly for web development) and for compiling and executing code without needing to switch out of the editor to a console or IDE. I’ll also comment on why using them is a good idea.

在本文中，我将介绍一些用于代码编辑器Atom的软件包，这些软件包可用于在您键入时预览更改(特别是对于Web开发)，以及用于在无需切换到控制台或IDE的情况下编译和执行代码。我还将评论为什么使用它们是一个好主意。

Note: Ctrl|Cmd signifies the PC “control” key, or the Mac “command” key, when showing shortcuts.

注意：当显示快捷方式时， Ctrl|Cmd表示PC“控制”键或Mac“命令”键。

可视化实时变化 (Visualizing Live Changes)

Changing from one program (the one in which you code) to another (the one in which you visualize things) not only has a cost in time, but it also comes at a cognitive expense. That is, it makes you less productive, since you lose focus and mental power as you switch from one task to another. (See “The High Cost of Multitasking: 40% of Productivity Lost by Task Switching” and “The True Cost Of Multi-Tasking”, to shed some light on this topic.)

从一个程序(您在其中进行编码的程序)更改为另一个程序(您在其中进行可视化的程序)不仅花费时间，而且付出了认知上的代价。就是说，这会使您的工作效率降低，因为当您从一项任务切换到另一项任务时，您会失去精力和精力。 (请参阅“ 多任务处理的高成本：由于任务切换而损失的生产力的40％ ”和“ 多任务处理的实际成本 ”，以阐明该主题。)

Being able to have immediate feedback for your programming, on the other hand, and seeing changes reflected as you type (for the cases when this is possible) will enable you to save a lot of working time and focus, for you don’t need to be switching tasks and applications, and to a large extent the act of programming, visualizing and debugging becomes a single task.

另一方面，能够立即获得编程反馈，并在键入时看到反映的更改(在可能的情况下)，将节省大量的工作时间和精力，因为您不需要切换任务和应用程序，并且在很大程度上将编程，可视化和调试的行为变成一项任务。

I’ll show you some community packages that will enable/disable the visualization of changes with just a key stroke, so that we can keep everything — editing and viewing — within Atom.

我将向您展示一些社区软件包，这些软件包将使您只需轻按一下即可启用/禁用更改的可视化，以便我们将所有内容(编辑和查看)保留在Atom中。

Web开发 (WebDev)

Unlike Brackets, which is a code editor designed mainly for the web, Atom doesn’t come with built-in preview for HTML and CSS code. And this actually is a bit strange, considering that Atom is built on top of Electron, which is a framework that already uses Chromium (the open-source project behind the Google Chrome browser) as part of its engine.

与Brackets是主要为Web设计的代码编辑器不同，Atom不带有HTML和CSS代码的内置预览。考虑到Atom是建立在Electron之上的，这实际上有点奇怪， Electron是一个框架，已经使用Chromium (Google Chrome浏览器背后的开源项目)作为其引擎的一部分。

All the same, thanks to Atom “hackability”, here are some packages that will bring this functionality to the editor.

归功于Atom的“可破解性”，这里有一些软件包可以将此功能带到编辑器中。

Atom HTML预览 (Atom HTML Preview)

Atom HTML Preview shows a live, as-you-type preview for HTML documents, with support for CSS and JavaScript. This is somewhat basic for today’s web development, but it’ll do the work just fine for many of us. It’s a simple, lightweight package that does exactly what’s expected.

Atom HTML预览显示HTML文档的即时键入预览，并支持CSS和JavaScript。这对于今天的Web开发来说是基本的东西，但是对于我们许多人来说，它所做的工作就很好。这是一个简单，轻便的程序包，完全可以完成预期的工作。

Source

资源

To install: apm install atom-html-preview

要安装： apm install atom-html-preview

浏览器加 (Browser Plus)

Browser Plus is a package that will allow you to open a browser in an Atom tab, which even comes with the Developer Tools for handy debugging!

Browser Plus是一个软件包，可让您在Atom选项卡中打开浏览器，甚至附带了Developer Tools以便进行调试！

For the live changes preview, you’ll need to click on the thunderbolt icon, but notice that you’ll still need to save the file you’re editing (Ctrl|Cmd+S) in order to visualize the changes. To enable a “hyper” live preview to show changes as you type, alongside with support to preview changes in JSP/PHP/Express/Django, among other languages and frameworks, you’ll need to install the companion package Preview Plus (PP).

对于实时更改预览，您需要单击雷电图标，但是请注意，您仍需要保存正在编辑的文件( Ctrl|Cmd+S )以可视化更改。为了使“超级”实时预览能够在您键入时显示更改，并支持在JSP / PHP / Express / Django等语言和框架中预览更改，您需要安装配套包Preview Plus (PP) 。

View animated GIF version

查看GIF动画版本

To install: apm install browser-plus To install “hyper” preview and other frameworks support: apm install pp

要安装： apm install browser-plus要安装“超级”预览和其他框架支持： apm install pp

Bootstrap 3对Atom的支持 (Bootstrap 3 Support for Atom)

Bootstrap 3 Support for Atom, now that we’re getting more specific, brings support for Twitter’s framework for web development, Bootstrap. It works smoothly with the aforementioned Atom HTML Preview, and it has the following features:

现在我们将更加具体地介绍Bootstrap 3对Atom的支持，它为Twitter的Web开发框架Bootstrap提供了支持。它可以与前面提到的Atom HTML Preview顺利运行，并且具有以下功能：

Supports autocompletion of all helper classes in JavaScript, CSS and HTML.

支持JavaScript，CSS和HTML中所有辅助类的自动完成。 Snippet support for all components.

对所有组件的代码段支持。 Autocompletion for Glyphicons, Fontawesome and Octicons

Glyphicons，Fontawesome和Octicons的自动补全

View animated GIF version

查看GIF动画版本

To install: apm install atom-bootstrap3

要安装： apm install atom-bootstrap3

预览Atom (Preview for Atom)

As mentioned before, web development these days involves a lot more than editing HTML, CSS and JavaScript files. It’s normal today to use pre-processors such as Less and Sass to generate style sheets, or to code in languages like TypeScript, or CoffeeScript and its derivatives, that would later compile into JavaScript code. The downside with using all these tools is that it makes visualizing and debugging the actual end code a lot trickier. Even highlighting plain JavaScript code will help little if you’re making intensive use of frameworks or libraries such as Facebook’s React.

如前所述，如今的Web开发不仅涉及编辑HTML，CSS和JavaScript文件。今天，使用Less和Sass之类的预处理器来生成样式表，或使用诸如TypeScript或CoffeeScript及其衍生语言之类的代码进行编码，然后再编译为JavaScript代码，这是正常的。使用所有这些工具的不利之处在于，它使可视化和调试实际的最终代码变得更加棘手。如果您大量使用诸如Facebook的React之类的框架或库，那么即使突出纯JavaScript代码也无济于事。

Preview for Atom is a very extensive package that comes to deal with these scenarios by allowing you to preview source code in compiled form (that is, the actual end code).

Preview for Atom是一个非常广泛的软件包，通过允许您预览已编译形式的源代码(即实际的最终代码)来处理这些情况。

It supports the following languages, frameworks and libraries:

它支持以下语言，框架和库：

CoffeeScript

CoffeeScript Literate CoffeeScript

精巧的CoffeeScript Less

减 Jade

玉 DogeScript

DogeScript TypeScript

打字稿 Stylus

触控笔 DSON

DSON React (JSX)

React(JSX) EmberScript

EmberScript ng-classify

ng-分类 LiveScript

实时脚本

It also plans to support Sass, Markdown, Haml, ClojureScript and Dart in the near future.

它还计划在不久的将来支持Sass，Markdown，Haml，ClojureScript和Dart。

Among its features:

其功能包括：

Preview source code in compiled form in separate tab

在单独的选项卡中以编译形式预览源代码 Live updating of preview

实时更新预览 Shows loading and error messages

显示加载和错误消息 Updates on tab change

标签更改的更新 Highlights using active Atom theme

使用活动的Atom主题的亮点 Users can manually change the default preview renderer

用户可以手动更改默认预览渲染器 SpacePen views can live preview

SpacePen视图可以实时预览

Source

资源

To install: apm install preview

要安装： apm install preview

降价促销 (Markdown)

Source

资源

Markdown is a lightweight markup language to create rich text using just plain text, and since it’s very human-readable it is often used to format README files, and messages in online forums that will be rendered later into HTML.

Markdown是一种轻量级的标记语言，用于仅使用纯文本来创建富文本，并且由于它易于阅读，因此通常用于格式化README文件和在线论坛中的消息，这些消息随后将呈现为HTML。

降价预览 (Markdown Preview)

Atom comes with built-in support for editing and visualizing these files, provided by the Markdown Preview package that you don’t need to install. Files with the .md extension will automatically be highlight with the Markdown syntax, and to toggle the preview tab on, you can use the default shortcut Ctrl|Cmd+Shift+M.

Atom内置了对这些文件进行编辑和可视化的支持，这些支持由Markdown Preview软件包提供，您无需安装。扩展名为.md文件将使用Markdown语法自动突出显示，并且要打开预览选项卡，可以使用默认快捷键Ctrl|Cmd+Shift+M

Source

资源

To install: (bundled, no action)

安装：(捆绑，无操作)

Markdown Preview Plus (Markdown Preview Plus)

Markdown Preview Plus (MPP) is a community extension to the previous package that comes with some additional features:

Markdown Preview Plus (MPP)是先前软件包的社区扩展，带有一些其他功能：

Opening a preview. Drop-in replacement for the Ctrl|Cmd+Shift+M shortcut.

打开预览。替代Ctrl|Cmd+Shift+M快捷键。

LaTeX equation rendering. Extends the syntax of GitHub flavored markdown with equation blocks.

LaTeX方程渲染。用方程式块扩展GitHub风格的markdown语法。

Pandoc support. Richer functionality including support to define custom pandoc arguments, and enable citation replacement.

Pandoc支持。更加丰富的功能，包括支持定义自定义pandoc参数以及启用引文替换。

On-demand synchronization. Synchronize the positions of the Markdown source editor and preview on demand.

按需同步。同步Markdown源代码编辑器的位置并按需预览。

source

资源

To install: apm install markdown-preview-plus

要安装： apm install markdown-preview-plus

执行解释和编译的代码 (Executing Interpreted and Compiled Code)

Script is an extension with a simple name that brings functionality that you’ll find more generally on specialized IDEs, and that will save you quality time for testing and debugging. Basically, it allows you to execute code for interpreted languages such as PHP or Python, and even for compiled languages such as C or Java, and to see the results on a different pane within Atom, right next to the code you’re editing. Additionally, for most languages, it allows you to execute (or compile, then execute) the file you’re editing in full, or just a selection of it (as when you select a piece of text).

脚本是一个具有简单名称的扩展，它带来的功能是在专用IDE上更常见的功能，并且可以节省测试和调试的质量。基本上，它使您可以为PHP或Python之类的解释语言甚至是C或Java之类的编译语言执行代码，并在正在编辑的代码旁边，在Atom的另一个窗格中查看结果。此外，对于大多数语言，它允许您执行(或编译，然后执行)要完全编辑的文件，或仅执行其中的一部分(如选择一段文本时)。

It comes with a number of shortcuts to run (with and without a compilation profile, and with options) and kill processes, and to close the view of the output — everything with just a few key strokes. The output can be optionally timed to see how long it took for the script/program to execute.

它带有许多快捷方式，可以运行(带有和不带有编译配置文件以及选项)和杀死进程，以及关闭输出视图-只需敲击几个键即可完成所有操作。可以选择对输出进行计时，以查看脚本/程序执行所需的时间。

You can also conveniently pass tags such as {FILE_ACTIVE} or {PROJECT_PATH} that will be replaced at compilation or execution time.

您还可以方便地传递将在编译或执行时替换的标签，例如{FILE_ACTIVE}或{PROJECT_PATH} 。

Surprisingly, the installation is as simple as with most Atom packages. You’ll just need to make sure the interpreters or compilers you’ll need are all available in your PATH environment variable.

令人惊讶的是，安装与大多数Atom软件包一样简单。您只需要确保所需的解释器或编译器在PATH环境变量中都可用即可。

The list of supported languages and compilers is very comprehensive: 1C (BSL), Ansible, AutoHotKey, AppleScript, Babel ES6 JS, Bash, Batch, Behat Feature, BuckleScript, C, C#, C# Script, C++, Clojure, CoffeeScript (normal and literate), Crystal, Cucumber (Gherkin), D, Dart, DOT (Graphviz), Elixir, Erlang, F#, F*, Fish, Forth (via GForth), Fortran (via gfortran), Gnuplot, Go, Groovy, Haskell (normal and literate), Hy, IcedCoffeeScript, Inno Setup, ioLanguage, Java, JavaScript, JavaScript for Automation (JXA), Jolie, Julia, Kotlin, LaTeX (via latexmk), LilyPond, Lisp (via SBCL), LiveScript, Lua (normal and WoW), Makefile, MATLAB, MIPS, MongoDB, MoonScript, NCL, newLISP, Nim (and NimScript), NSIS, Objective-C, OCaml, Octave, Oz, Pandoc Markdown, Perl, Perl 6, PHP, PostgreSQL, PowerShell, Processing, Prolog, Python, R, Racket, RANT, Reason, Ren’Py, RSpec, Ruby, Ruby on , Rails, Rust, Sage, Sass/SCSS, Scala, Scheme, Shell Script, Standard ML, Stata, Swift, Tcl, TypeScript, Zsh.

支持的语言和编译器列表非常全面：1C(BSL)，Ansible，AutoHotKey，AppleScript，Babel ES6 JS，Bash，Batch，Behat Feature，BuckleScript，C，C＃，C＃Script，C ++，Clojure，CoffeeScript(正常和识字)，水晶，Cucumber(Gherkin)，D，Dart，DOT(Graphviz)，Elixir，Erlang，F＃，F *，Fish，Forth(via GForth)，Fortran(via gfortran)，Gnuplot，Go，Groovy，Haskell(一般，识字)，Hy，IcedCoffeeScript，Inno Setup，ioLanguage，Java，JavaScript，自动化JavaScript(JXA)，朱莉，Julia，Kotlin，LaTeX(通过Latexmk)，LilyPond，Lisp(通过SBCL)，LiveScript，Lua(正常)和WoW)，Makefile，MATLAB，MIPS，MongoDB，MoonScript，NCL，newLISP，Nim(和NimScript)，NSIS，Objective-C，OCaml，Octave，Oz，Pandoc Markdown，Perl，Perl 6，PHP，PostgreSQL，PowerShell，处理，Prolog，Python，R，球拍，RANT，原因，Ren'Py，RSpec，Ruby，Ruby on，Rails，Rust，Sage，Sass / SCSS，Scala，Scheme，Shell脚本，标准ML，Stata，Swift，Tcl ，TypeScript，Zsh。

This is what executing code with Script looks like:

这是使用脚本执行代码的样子：

View animated GIF version

查看GIF动画版本

To install: apm install script

要安装： apm install script

接下来做什么 (What to Do Next)

Mastering your code editor — whichever it happens to be — is a key aspect of being a proficient programmer, as it will dramatically boost your workflow. So if you haven’t already, go and get familiar with the shortcuts, and google the actions you do the most to check if there’s a simplification for them. Or, if you’re dealing with a hackable editor such as Atom, search packages, or consider writing one yourself if it will save you and other people time in the long run.

熟练掌握代码编辑器(无论发生什么情况)是成为熟练的程序员的关键方面，因为它将极大地促进您的工作流程。因此，如果您还没有，请熟悉一下这些快捷方式，然后搜索最常用的操作，以检查它们是否有所简化。或者，如果您使用的是可黑客入侵的编辑器(例如Atom，搜索程序包) ，或者考虑自己编写，这样从长远来看可以节省您和其他人的时间。