Atom
> 插件
color-picker -- 顏色選擇
block-comments-n -- 塊註釋
file-icons -- 文件圖標
seti-icons -- 文件圖標 [recommand]
markdown-preview -- md文件瀏覽
tree-view-git-status -- giti狀態瀏覽
atom-material-ui -- theme
minimap -- preview source code
docblockr -- comments auto complete.
simplified-chinese-menu -- Atom中文包
emmet -- css style to fill html tag.
atom-html-preview -- html實時預覽
autocomplete-paths -- 文件路徑自動提示
jquery-snippets -- jq代碼自動提示完成
autoprefixer -- 自動添加瀏覽器前綴
activate-power-mode -- 代碼編輯時的特效 -- cpu佔用會升高
highlight-selected -- 雙擊高亮選中詞
language-javascript-jsx -- jsx語法支持
hyperclick + goto-definition -- Ctrl + click 函數跳轉
linter-jshint -- js代碼檢查
git-control -- git GUIa插件
symbol-tree-view -- atom代碼解構預覽插件
jsx-comment -- jsx 註釋插件
toggler -- 正反義詞切換插件(true -> false)
color-tabs -- 自定義tab顏色
atom-beautify -- 格式化美化代碼
svn -- 文件狀態顯示
atom-material-syntax -- 配合atom-material-ui扁平化主題的編輯器主題
css-color-name -- 鍵入color 名字後在提示區域裏顯示顏色預覽
remote-ftp -- 使用sftp協議遠程編輯同步到虛擬機或服務器
tree-view-autoresize -- 自動根據文件名長度調整文件瀏覽樹寬度
tree-view-copy-relative-path -- 在文件樹中複製某個文件的相對路徑
atom-vim-mode-plus -- 在atom編輯器中使用vim模式
Chester Atom -- 編輯器主題
atom-ide-ui -- atomIDE插件，需要配合ide-typescript
nucleus-dark-ui -- UI主題插件，比較醒目
city-lights -- UI主題，專注代碼，扁平風格
markdown-scroll-sync -- markdown編輯同步預覽
platformio-ide-terminal -- 編輯器內嵌命令行終端
Chester Atom -- Systax 主題
dash -- UI主題
seti -- UI主題 (using)
Material Palenight -- Syntax 主題 (using)
Nucleus Dark -- UI 主題
autocomplete-python -- python自動補全
python-debugger -- python調試器
> 代碼段配置
# Your snippets
#
# Atom snippets allow you to enter a simple prefix in the editor and hit tab to
# expand the prefix into a larger code block with templated values.
#
# You can create a new snippet in this file by typing "snip" and then hitting
# tab.
#
# An example CoffeeScript snippet to expand log to console.log:
#
# '.source.coffee':
# 'Console log':
# 'prefix': 'log'
# 'body': 'console.log $1'
#
# Each scope (e.g. '.source.coffee' above) can only be declared once.
#
# This file uses CoffeeScript Object Notation (CSON).
# If you are unfamiliar with CSON, you can read more about it in the
# Atom Flight Manual:
# http://flight-manual.atom.io/using-atom/sections/basic-customization/#_cson
'.source.js':
'head comment':
'prefix': 'head-comment'
'body': '''
/**
* @name: $1
* @description: $2
* @author: 楊偉([email protected])
*/
'''
'block comment':
'prefix': 'block-comment'
'body': '''
/**
* [fn description]
* @author 楊偉([email protected])
* @param 參數名 {參數類型} [描述]
* @return {參數類型} [description]
*/
'''
'line commnet':
'prefix': 'line-comment'
'body': '''
/* ------------------- $1 ------------------- */
'''
'line commnet main':
'prefix': 'line-comment-main'
'body': '''
/* ************************* $1 ************************* */
'''
'comments instruction':
'prefix': 'inst-comment'
'body': '''
/* -----------------------------------------------------------------------------
說明$1
----------------------------------------------------------------------------- */
'''
'normal comment 1':
'prefix': 'normal-comment-1'
'body': '''
/* $1 */
'''
'.source.css':
'component block comment':
'prefix': 'block-comment'
'body': '''
/* ============================================================================
父組件$1
============================================================================= */
'''
'sub-component block comment':
'prefix': 'sublock-comment'
'body': '''
/* 子組件$1
============================================================================= */
'''
'.source.sass':
'component block comment':
'prefix': 'block-comment'
'body': '''
/* ============================================================================
父組件$1
============================================================================= */
'''
'sub-component block comment':
'prefix': 'sublock-comment'
'body': '''
/* 子組件$1
============================================================================= */
'''
'.text.html.basic':
'html5 structure autocomplete':
'prefix': 'html5'
'body': '''
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta charset="utf-8">
<!-- 中文 -->
<meta lang="zh-Hans">
<!-- 英文 -->
<meta lang="en">
<!-- 簡體中文 -->
<meta lang="zh-cmn-Hans">
<!-- 繁體中文 -->
<meta lang="zh-cmn-Hant">
<!-- 優先使用新版IE和Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<!-- 百度禁止轉碼 -->
<meta http-equiv="Cache-Control" content="no-siteapp">
<!-- 頁面關鍵詞 -->
<meta name="keywords" content="1 2 3">
<!-- 頁面描述 -->
<meta name="description" content="123">
<!-- 移動端視口viewport -->
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<!-- 網頁作者 -->
<meta name="author" content="name,[email protected]">
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow">
</head>
<body>
</body>
</html>
'''
> 快捷鍵配置
# Your keymap
#
# Atom keymaps work similarly to style sheets. Just as style sheets use
# selectors to apply styles to elements, Atom keymaps use selectors to associate
# keystrokes with events in specific contexts. Unlike style sheets however,
# each selector can only be declared once.
#
# You can create a new keybinding in this file by typing "key" and then hitting
# tab.
#
# Here's an example taken from Atom's built-in keymap:
#
# 'atom-text-editor':
# 'enter': 'editor:newline'
#
# 'atom-workspace':
# 'ctrl-shift-p': 'core:move-up'
# 'ctrl-p': 'core:move-down'
#
# You can find more information about keymaps in these guides:
# * http://flight-manual.atom.io/using-atom/sections/basic-customization/#_customizing_keybindings
# * http://flight-manual.atom.io/behind-atom/sections/keymaps-in-depth/
#
# If you're having trouble with your keybindings not working, try the
# Keybinding Resolver: `Cmd+.` on macOS and `Ctrl+.` on other platforms. See the
# Debugging Guide for more information:
# * http://flight-manual.atom.io/hacking-atom/sections/debugging/#check-the-keybindings
#
# This file uses CoffeeScript Object Notation (CSON).
# If you are unfamiliar with CSON, you can read more about it in the
# Atom Flight Manual:
# http://flight-manual.atom.io/using-atom/sections/basic-customization/#_cson
'atom-text-editor':
#方向鍵
'ctrl-i': 'core:move-up'
'ctrl-m': 'core:move-down'
'ctrl-j': 'core:move-left'
'ctrl-l': 'core:move-right'
#移動到行首和行尾
'ctrl-alt-j': 'editor:move-to-first-character-of-line'
'ctrl-alt-l': 'editor:move-to-end-of-screen-line'
'ctrl-alt-k': 'editor:move-to-end-of-screen-line'
#向前後移動一個單詞
'alt-l': 'editor:move-to-end-of-word'
'alt-j': 'editor:move-to-beginning-of-word'
#向前選擇一個單詞
'ctrl-shift-j': 'editor:select-to-beginning-of-word'
#向後選擇一行
'ctrl-shift-l': 'editor:select-to-end-of-line'
#刪除到單詞的開頭
'ctrl-backspace': 'editor:delete-to-beginning-of-word'
#刪除一行
'ctrl-delete': 'editor:delete-line'
#選擇下一個標籤頁
'ctrl-shift-k': 'pane:show-next-item'
#選擇上一個標籤頁
'ctrl-shift-i': 'pane:show-previous-item'
#autoprefixer自動添加css瀏覽器前綴
'ctrl-shift-x': 'autoprefixer'
#markdown preview
'ctrl-shift-m': 'markdown-preview:toggle'
'atom-workspace':
'ctrl-u': 'core:move-up'
'ctrl-j': 'core:move-down'
VsCode
> 熱鍵映射map
// Place your key bindings in this file to overwrite the defaults
[
{
"key": "ctrl+j",
"command": "cursorLeft",
"when": "textInputFocus"
},
{
"key": "ctrl+l",
"command": "cursorRight",
"when": "textInputFocus"
},
{
"key": "ctrl+i",
"command": "cursorUp",
"when": "textInputFocus"
},
{
"key": "ctrl+m",
"command": "cursorDown",
"when": "textInputFocus"
},
{
"key": "ctrl+alt+j",
"command": "cursorHome",
"when": "textInputFocus"
},
{
"key": "ctrl+alt+l",
"command": "cursorEnd",
"when": "textInputFocus"
},
{
"key": "ctrl+shift+i",
"command": "cursorPageUp",
"when": "textInputFocus"
},
{
"key": "ctrl+shift+k",
"command": "cursorPageDown",
"when": "textInputFocus"
},
{
"key": "alt+j",
"command": "cursorWordStartLeft",
"when": "textInputFocus"
},
{
"key": "alt+l",
"command": "cursorWordStartRight",
"when": "textInputFocus"
},
]
> 常用插件
- Push -> SFTP and File based uploading