在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 教程/ HTML/ Atom 文本編輯器
書單
JavaScript 動畫
HTML
CSS Reset
屬性操作
DOM 事件
閉包
Photoshop
Atom 文本編輯器
表單操作
布局解決方案
類型系統(tǒng)
開發(fā)實(shí)踐
數(shù)據(jù)通信
變量作用域
BOM
JavaScript 程序設(shè)計(jì)
前端工程師概述
CSS
響應(yīng)式布局
表達(dá)式與運(yùn)算符
基本語法
JavaScript 介紹
版本控制
布局
調(diào)試器
背景
圖片保存
多媒體
文檔樹
列表操作
Sublime 編輯器
盒模型
常見布局樣例
類型識別
變形
數(shù)據(jù)存儲
選擇器
頁面架構(gòu)
開發(fā)及調(diào)試工具
頁面模塊化
節(jié)點(diǎn)操作
測量及取色
瀏覽器兼容
HTML 簡介
內(nèi)置對象
實(shí)體字符
產(chǎn)品前端架構(gòu)
協(xié)作流程
切圖
工具, 面板, 視圖
正則表達(dá)式
動畫
語句
面向?qū)ο?/span>
HTML 語法
HTML 標(biāo)簽
技術(shù)選擇
樣式操作
圖片優(yōu)化與合并
語法
DOM 編程藝術(shù)
Canvas
接口設(shè)計(jì)
頁面優(yōu)化
文本

Atom 文本編輯器

Atom 文本編輯器

本文即為在 Atom 下編寫完成,在寫作過程中讓我對這個嶄新的 1.0 版本文本編輯器 有了更多的了解。 在閱讀本文時注意快捷鍵于后面英文單詞的對應(yīng)可幫助記憶,在使用中忘記的快捷鍵以可以通過使用 查詢面板(后面會提到)進(jìn)行查詢。 如果你在使用過程中發(fā)現(xiàn)了異常和錯誤可以到 Atom 所在的 GitHub 倉庫提交問題報(bào)告。同一款編輯器一同成長,愿力量與你同在! 下面的快捷鍵均為 Mac OS X 默認(rèn)設(shè)置。如你用的是 Windows 或者是 Linux,可能需要嘗試將 所有提到的 cmd 改為 ctrl。

基礎(chǔ)中的基礎(chǔ)

開始之前先把下面這條快捷鍵記住。cmd+shift+P 它會打開類似 Alfred 的快捷功能選擇窗口, 如果你從來沒有聽過 Alfred(此為 Mac OS X 特有應(yīng)用) 那你應(yīng)該趕緊去所搜引擎中找找了。

保存時間

快捷鍵 描述
cmd-shift-S 可以另存為 "Save As"
cmd-alt-S 可以保存全部的 "Save All".

打開文件與目錄

如果在命令行環(huán)境中可以使用下面的方法一次打開多個目錄。

# 打開目錄
atom ./hopes ./dreams

# 獲得幫助
atom -h
快捷鍵 描述
cmd-O 打開文件
cmd-shift-O 添加目錄至當(dāng)前編輯器窗口

cmd-P 可以打開 Fuzzy Finder 進(jìn)行模糊搜索,默認(rèn)可所搜區(qū)域?yàn)轫?xiàng)目內(nèi)所有文件。 下面的命令可以對模糊所搜做一些限制,cmd-B 只所搜已打開的文件(存在與 Buffer 中的文件)。 cmd-shift-B

1.0 版本中在編輯器中添加的新文件無法使用 Fuzzy Finder(模糊尋找) 找到,重啟后則可以解決。

邊欄(樹目錄)

快捷鍵 描述
cmd-\ 顯示或隱藏邊欄
ctrl-0 聚焦邊欄,聚焦后可以操作樹目錄中的文件

在聚焦后可以通過 a 來增加(add),m 來移動(move),d 來復(fù)制(duplicate)或者 delete 來刪除(此處為鍵盤刪除鍵)。 這里的操作并沒有自動路徑補(bǔ)全功能,之后可能需要插件支持。

開始使用

Atom 中幾乎所有的功能都是以插件的形式存在的。所有如何安裝插件則就是我們第一件要做的事。 除了圖形界面安裝的方法外,隨 Atom 還安裝了插件管理器叫做 apm 。通過它也可以直接安裝 和更新插件。簡單說主題也是插件,所以安裝主題與安裝插件的步驟類似。

下面的操作均需要聯(lián)網(wǎng)

# 安裝插件
apm install <package_name>

# 安裝指定版本的插件
apm install <package_name>@<package_version>

# 查詢插件
apm search <package_name>

# 查詢插件詳情
apm view <package_name>
移動光標(biāo)

Atom 的移動快方法同 Emacs 一致。在熟悉使用 Atom 后也很容易的轉(zhuǎn)移至 Emacs 的環(huán)境下熟練工作。

單個字符的移動,效果于方向鍵一致。

快捷鍵 描述
ctrl-P 上移(Previous)
ctrl-N 下移(Next)
ctrl-B 后移(Back)
ctrl-F 前移(Forward)

在單個字符移動基礎(chǔ)上,可以延展至更大范圍的移動。例如,單詞,整行。

快捷鍵 描述
alt-B 向后以詞為單位移動(英文),中文則以英文標(biāo)點(diǎn)為間隔
alt-F 向前以詞為單位移動(英文),中文則以英文標(biāo)點(diǎn)為間隔
ctrl-E 移動至行末(End)
ctrl-A 移動至此行首字符(Ahead)
ctrl-A(敲擊兩次) 移動至此行行首(包括空格)
cmd-up 移動至文件最頂
cmd-down 移動至文件最低

ctrl-G 加數(shù)字可移動至目標(biāo)行,使用 row:column 可以定位行數(shù)和列數(shù), 使用這個方法在查找錯誤時變得十分方便。

cmd-R 可以在當(dāng)前文件中(Buffer)按照符號來搜索,符號關(guān)鍵字指的是函數(shù)名(代碼中) 或標(biāo)題(文檔中)。

選擇

選擇是在移動的基礎(chǔ)上加入 shift 既可完成。特別的幾種選擇方法如下。

快捷鍵 描述
cmd-L 選取整行
ctrl-shift-W 選取當(dāng)前單詞(英文),中文則為整行
編輯與刪除

Atom 如同其他的常用的文本編輯器一樣可以直接編輯文字,并不存在特殊的模式。但了解下面的 編輯技巧可以讓你使用 Atom 更得心應(yīng)手。

編輯操作

快捷鍵 描述
ctrl-T 交換光標(biāo)兩邊的字符(Transpose)
ctrl-J 將下一行同當(dāng)前行合并(Join)
ctrl-cmd-up 向上冒泡當(dāng)前行
ctrl-cmd-down 向下冒泡當(dāng)前行
cmd-shift-D 復(fù)制當(dāng)前行(Duplicate)
cmd-K, cmd-U 轉(zhuǎn)換選中字符至全大寫
cmd-K, cmd-L 轉(zhuǎn)換選中字符至全小

刪除操作

快捷鍵 描述
ctrl-shift-K 刪除當(dāng)前(Cut)
cmd-delete 刪除此行光標(biāo)后全部字符
cmd-backspace 刪除至當(dāng)前行首
ctrl-K 切帖至行末(Cut)
alt-H 刪除前一個字符
alt-D 刪除后一個字符

多個光標(biāo)及選擇

Sublime Text 相同,Atom 也同樣有多光標(biāo)的實(shí)現(xiàn)。 按住cmd可以在文本中使用進(jìn)行區(qū)域性選擇。

快捷鍵 描述
cmd-click 在點(diǎn)擊處增加新光標(biāo)
cmd-shift-L 將選擇區(qū)域轉(zhuǎn)換為多光標(biāo)
ctrl-shift-up 在上一行增加新光標(biāo)
ctrl-shift-down 在下一行增加新光標(biāo)
cmd-D 選擇下一個于當(dāng)前被選字符相同的字符并添加新光標(biāo)
cmd-ctrl-G 選擇全部于當(dāng)前選中字符相同的字符并添加光標(biāo)
括號

編程中最常打交道和需要跳出的莫屬于括號和引號了。Atom 對于括號有很好的處理辦法, 各種括號在光標(biāo)內(nèi)移動都會被自動高亮(引號和 HTML 中的標(biāo)簽也會被高亮和自動補(bǔ)全)。 選中內(nèi)容后使用括號可以自動將選中內(nèi)容包含在括號或引號內(nèi)。

快捷鍵 描述
ctrl-M 跳至最近的一個括號的起始位置
ctrl-cmd-M 選中括號內(nèi)的所有內(nèi)容
alt-cmd-. 關(guān)閉最近的一個 XML/HTML 標(biāo)簽
搜索與替換
快捷鍵 描述
cmd-F 當(dāng)前文本中搜索
cmd-shift-F 搜索整個項(xiàng)目
cmd-G 找到下一個匹配的搜索結(jié)果
cmd-G-shift 找到上一個匹配的搜索結(jié)果

在項(xiàng)目搜索中可以使用 wildcard 和指定目標(biāo)的搜索路徑。

代碼片段(Snippets)

代碼片段讓你在寫代碼時有飛一般的感覺,代碼片段會將預(yù)先設(shè)置好的代碼片段替換在當(dāng)前文本中, 并且設(shè)置焦點(diǎn)并用 tab 聚焦下一個焦點(diǎn), 或 shift + tab 聚焦上一個焦點(diǎn)。

所有的代碼片都存儲在下面的目錄中 ~/.atom/snippets.cson, 你可以通過 Open Your Snippets Menu 打開此文件。

快捷鍵 描述
alt-shift-S 顯示當(dāng)前文件類型下的全部代碼片段

當(dāng)然制作代碼片也有一個代碼片,它就是 snip 。

制作代碼片段

下面是一個簡單的代碼片樣例。

'.source.js':
  'console.log':
    'prefix': 'log'
    'body': 'console.log(${1: "crash"});$2'
  • .source.js 為代碼片可用的文件類型范圍
  • console.log 為代碼片內(nèi)容描述
  • prefix 為代碼片調(diào)用字符
  • body 代碼片主體內(nèi)容
  • ${1:'crash'} 用于定義焦點(diǎn),順序及其默認(rèn)值

多行代碼代碼片

'.source.js':
  'if, else if, else':
    'prefix': 'ieie'
    'body': """
      if (${1:true}) {
        $2
      } else if (${3:false}) {
        $4
      } else {
        $5
      }
    """
代碼折疊

可以點(diǎn)擊代碼行號邊的箭頭折疊當(dāng)前層級的代碼。

快捷鍵 描述
alt-cmd-[ 折疊當(dāng)前層級
alt-cmd-] 展開當(dāng)前層級
alt-cmd-shift-{ 折疊全部層級
alt-cmd-shift-} 展開全部層級
cmd-K, cmd-N(層級數(shù)) 根據(jù)層級級別折疊
多窗口模式

任意一個窗口都可以無需的四面分割,分割的部分則依然使用標(biāo)簽來表示。

快捷鍵 描述
cmd-k arrow 根據(jù)方向指定分割窗口
cmd-K, cmd-arrow 聚焦指定方向的窗口
解碼(Encoding)

Atom 支持多種解碼格式(包括中文 GBK 的支持),也可自動識別解碼方式 (不能識別時則默認(rèn)為 UTF-8)。當(dāng)然你也可以使用這種方法將多種文本在多種解碼格式直接轉(zhuǎn)換。

快捷鍵 描述
ctrl-shift-U 切換解碼方式
書簽

Atom 添加書簽就如同你看書的時添加書簽一樣,它使你在書寫代碼時可以自如的跳轉(zhuǎn)到你需要的 位置。

快捷鍵 描述
F2-cmd 可以在當(dāng)前行切換標(biāo)記書簽
F2 跳轉(zhuǎn)至下一個書簽
F2-shift 跳轉(zhuǎn)至上一個書簽
F2-ctrl 查看全部的書簽
F2-cmd-shift 清除全部標(biāo)簽
擴(kuò)展插件

下面列出了筆者在日常 Web 開發(fā)中所易用的插件,這些插件滿足了超過百分之九十筆者的開發(fā)需求。下面的這些插件均可以在官方插件管理器中進(jìn)行下載和安裝。

[
    {
        "name": "advanced-new-file",
        "version": "0.4.3"
    },
    {
        "name": "advanced-open-file",
        "version": "0.8.2"
    },
    {
        "name": "atom-beautify",
        "version": "0.28.8"
    },
    {
        "name": "AtomicChar",
        "version": "0.3.8"
    },
    {
        "name": "autocomplete-paths",
        "version": "1.0.2"
    },
    {
        "name": "docblockr",
        "version": "0.7.3"
    },
    {
        "name": "ex-mode",
        "version": "0.7.0"
    },
    {
        "name": "file-icons",
        "version": "1.6.2"
    },
    {
        "name": "language-jade",
        "version": "0.6.2"
    },
    {
        "name": "linter",
        "version": "1.3.0"
    },
    {
        "name": "linter-jshint",
        "version": "1.1.4"
    },
    {
        "name": "markdown-toc",
        "version": "0.3.0"
    },
    {
        "name": "merge-conflicts",
        "version": "1.3.5"
    },
    {
        "name": "minimap",
        "version": "4.12.2"
    },
    {
        "name": "minimap-linter",
        "version": "1.0.0"
    },
    {
        "name": "open-in-browser",
        "version": "0.4.6"
    },
    {
        "name": "pigments",
        "version": "0.9.3"
    },
    {
        "name": "sort-lines",
        "version": "0.11.0"
    },
    {
        "name": "sync-settings",
        "version": "0.6.0"
    },
    {
        "name": "tab-switcher",
        "version": "1.2.1"
    },
    {
        "name": "theme-switcher",
        "version": "1.1.0"
    },
    {
        "name": "vim-mode",
        "version": "0.57.0"
    },
    {
        "name": "atom-dark-syntax",
        "version": "0.27.0",
        "theme": "syntax"
    },
    {
        "name": "atom-dark-ui",
        "version": "0.49.0",
        "theme": "ui"
    },
    {
        "name": "atom-light-syntax",
        "version": "0.28.0",
        "theme": "syntax"
    },
    {
        "name": "atom-light-ui",
        "version": "0.41.0",
        "theme": "ui"
    },
    {
        "name": "base16-tomorrow-dark-theme",
        "version": "0.26.0",
        "theme": "syntax"
    },
    {
        "name": "base16-tomorrow-light-theme",
        "version": "0.9.0",
        "theme": "syntax"
    },
    {
        "name": "one-dark-ui",
        "version": "1.0.2",
        "theme": "ui"
    },
    {
        "name": "one-dark-syntax",
        "version": "1.1.0",
        "theme": "syntax"
    },
    {
        "name": "one-light-syntax",
        "version": "1.1.0",
        "theme": "syntax"
    },
    {
        "name": "one-light-ui",
        "version": "1.0.2",
        "theme": "ui"
    },
    {
        "name": "solarized-dark-syntax",
        "version": "0.38.1",
        "theme": "syntax"
    },
    {
        "name": "solarized-light-syntax",
        "version": "0.22.1",
        "theme": "syntax"
    },
    {
        "name": "about",
        "version": "1.0.1"
    },
    {
        "name": "archive-view",
        "version": "0.58.0"
    },
    {
        "name": "autocomplete-atom-api",
        "version": "0.9.2"
    },
    {
        "name": "autocomplete-css",
        "version": "0.9.0"
    },
    {
        "name": "autocomplete-html",
        "version": "0.7.2"
    },
    {
        "name": "autocomplete-plus",
        "version": "2.19.0"
    },
    {
        "name": "autocomplete-snippets",
        "version": "1.7.1"
    },
    {
        "name": "autoflow",
        "version": "0.25.0"
    },
    {
        "name": "autosave",
        "version": "0.22.0"
    },
    {
        "name": "background-tips",
        "version": "0.25.0"
    },
    {
        "name": "bookmarks",
        "version": "0.35.0"
    },
    {
        "name": "bracket-matcher",
        "version": "0.76.0"
    },
    {
        "name": "command-palette",
        "version": "0.36.0"
    },
    {
        "name": "deprecation-cop",
        "version": "0.53.1"
    },
    {
        "name": "dev-live-reload",
        "version": "0.46.0"
    },
    {
        "name": "encoding-selector",
        "version": "0.21.0"
    },
    {
        "name": "exception-reporting",
        "version": "0.36.0"
    },
    {
        "name": "find-and-replace",
        "version": "0.175.0"
    },
    {
        "name": "fuzzy-finder",
        "version": "0.87.0"
    },
    {
        "name": "git-diff",
        "version": "0.55.0"
    },
    {
        "name": "go-to-line",
        "version": "0.30.0"
    },
    {
        "name": "grammar-selector",
        "version": "0.47.0"
    },
    {
        "name": "image-view",
        "version": "0.54.0"
    },
    {
        "name": "incompatible-packages",
        "version": "0.24.1"
    },
    {
        "name": "keybinding-resolver",
        "version": "0.33.0"
    },
    {
        "name": "link",
        "version": "0.30.0"
    },
    {
        "name": "markdown-preview",
        "version": "0.150.0"
    },
    {
        "name": "metrics",
        "version": "0.51.0"
    },
    {
        "name": "notifications",
        "version": "0.57.0"
    },
    {
        "name": "open-on-github",
        "version": "0.37.0"
    },
    {
        "name": "package-generator",
        "version": "0.40.0"
    },
    {
        "name": "release-notes",
        "version": "0.53.0"
    },
    {
        "name": "settings-view",
        "version": "0.211.2"
    },
    {
        "name": "snippets",
        "version": "0.95.0"
    },
    {
        "name": "spell-check",
        "version": "0.59.0"
    },
    {
        "name": "status-bar",
        "version": "0.75.1"
    },
    {
        "name": "styleguide",
        "version": "0.44.0"
    },
    {
        "name": "symbols-view",
        "version": "0.100.0"
    },
    {
        "name": "tabs",
        "version": "0.82.0"
    },
    {
        "name": "timecop",
        "version": "0.31.0"
    },
    {
        "name": "tree-view",
        "version": "0.180.0"
    },
    {
        "name": "update-package-dependencies",
        "version": "0.10.0"
    },
    {
        "name": "whitespace",
        "version": "0.30.0"
    },
    {
        "name": "wrap-guide",
        "version": "0.35.0"
    },
    {
        "name": "language-c",
        "version": "0.45.0"
    },
    {
        "name": "language-clojure",
        "version": "0.16.0"
    },
    {
        "name": "language-coffee-script",
        "version": "0.41.0"
    },
    {
        "name": "language-csharp",
        "version": "0.6.0"
    },
    {
        "name": "language-css",
        "version": "0.32.1"
    },
    {
        "name": "language-gfm",
        "version": "0.80.0"
    },
    {
        "name": "language-git",
        "version": "0.10.0"
    },
    {
        "name": "language-go",
        "version": "0.31.0"
    },
    {
        "name": "language-html",
        "version": "0.40.0"
    },
    {
        "name": "language-hyperlink",
        "version": "0.14.0"
    },
    {
        "name": "language-java",
        "version": "0.15.0"
    },
    {
        "name": "language-javascript",
        "version": "0.85.0"
    },
    {
        "name": "language-json",
        "version": "0.15.0"
    },
    {
        "name": "language-less",
        "version": "0.28.1"
    },
    {
        "name": "language-make",
        "version": "0.14.0"
    },
    {
        "name": "language-mustache",
        "version": "0.12.0"
    },
    {
        "name": "language-objective-c",
        "version": "0.15.0"
    },
    {
        "name": "language-perl",
        "version": "0.28.0"
    },
    {
        "name": "language-php",
        "version": "0.27.0"
    },
    {
        "name": "language-property-list",
        "version": "0.8.0"
    },
    {
        "name": "language-python",
        "version": "0.38.0"
    },
    {
        "name": "language-ruby",
        "version": "0.57.0"
    },
    {
        "name": "language-ruby-on-rails",
        "version": "0.22.0"
    },
    {
        "name": "language-sass",
        "version": "0.40.0"
    },
    {
        "name": "language-shellscript",
        "version": "0.15.0"
    },
    {
        "name": "language-source",
        "version": "0.9.0"
    },
    {
        "name": "language-sql",
        "version": "0.17.0"
    },
    {
        "name": "language-text",
        "version": "0.7.0"
    },
    {
        "name": "language-todo",
        "version": "0.25.0"
    },
    {
        "name": "language-toml",
        "version": "0.16.0"
    },
    {
        "name": "language-xml",
        "version": "0.30.0"
    },
    {
        "name": "language-yaml",
        "version": "0.22.0"
    }
]