Atom
最強エディター Atom：妥協する点はclampに色がつかない程度。language-css packageをカスタムすれば対策できるがlanguage-cssをカスタムすると他の大きな問題が起きる。Atom 1.60.0 -> atom-windows.zip
Pulsar
Pulsar 致命的欠点：CSSファイル内、PHPファイル内でcssの補完が出ないことがある。CSS2文字目入力で候補が消え、3文字目入力で候補ワードがHTMLの候補に変わる。（原因不明）Pulsar Manual download -> Installer
Core
Ignored Names
プロジェクトサイドバーに表示させないものを設定
*.wav, *.mp3, *.png, *.jpg, *.JPG, *.jpeg, *.psd, *.ai, *.pdf, .git, .hg, .svn, .DS_Store, ._*, Thumbs.db, desktop.ini
Hide Ignored Names
Inored Names を有効にする
※プロジェクトサイドバーに表示させないファイル指定後にすること
※プロジェクトサイドバーに表示させないファイル指定後にすること
チェックを入れる
Allow Pending Pange Items
新規タブで開く
チェックを外す
Editor
Show Indent Guide
インデントの線を表示
チェックを入れる
Tab Length
インデントの長さ設定
3
Soft Wrap
日本語折り返し設定
チェックを入れる
Preferred Line Length
折り返しの縦線の位置
170
Soft Wrap at Preferred Line
Preferred Line Lengthで設定した位置で折り返す場合
チェックを入れる
config.cson
core:
allowPendingPaneItems: false
disabledPackages: [
"language-todo"
"language-text"
"autocomplete-css"
"autocomplete-html"
]
ignoredNames: [
"*.wav"
"*.mp3"
"*.png"
"*.jpg"
"*.JPG"
"*.jpeg"
"*.psd"
"*.ai"
"*.pdf"
"*.avif"
".git"
".hg"
".svn"
".DS_Store"
"._*"
"Thumbs.db"
"desktop.ini"
]
editor:
fontSize: 16
preferredLineLength: 170
showIndentGuide: true
softWrap: true
tabLength: 3
"exception-reporting":
userId: "そのまま"
"tree-view":
hideIgnoredNames: true
Keybindings
your keymap file というリンクをクリックしkeymap.csonを開くC:\Users\ユーザー名\.atom\keymap.cson
Ctrl + Tab での切り替わるタブの順番を変更
タブを1つづつ右へ移動させるように設定するには以下のコードをkeymap.csonへ貼り付ける
'body':
# ctrl-tabによるタブ順を1つづつ右へ移動させるように設定
'ctrl-tab ^ctrl': 'unset!'
'ctrl-tab': 'pane:show-next-item'
'ctrl-shift-tab ^ctrl': 'unset!'
'ctrl-shift-tab': 'pane:show-previous-item'
※Ctrl + Shift + Tab で左にひとつづつなる
Packages
無効化するパッケージ
緑矢印の余計なスニペット（bug,temp,ideaなど邪魔な補完候補ワード）を排除するため。- language-todo
- language-text
Themes
[your stylesheet]をクリックしユーザースタイルシートを編集C:\Users\ユーザー名\.atom\styles.less
プロジェクトツリー内のファイルアイコンの色を拡張子ごとに変える
すでに読み込まれているOcticonsのアイコンコードを使う。 Octiconsのアイコン一覧はStyleguideCtrl + Shift + G参照。※アイコンを変更できるパッケージfile iconは非推奨。プロジェクト内フォルダ展開時に多少遅延あるため
.icon-file-text {&[data-name$=".php"]:before { color:#5e8a6a; content:'\f010';}}
.icon-file-text {&[data-name$=".html"]:before { color:#916456; content:'\f05f'; }}
.icon-file-text {&[data-name$=".css"]:before { color:#fff; content:'{}';font-size:12px;}}
.icon-file-text {&[data-name$=".js"]:before { color:#0865a7; content:'\f00e';}}
.icon-file-text {&[data-name$=".htaccess"]:before { color:#8a8c50; }}
.icon-file-text {&[data-name$=".sql"]:before { content:'\f096'; }}
.icon-file-text {&[data-name$=".htpasswd"]:before { content:'\f049'; }}
.icon-file-text {&[data-name$=".gitignore"]:before{ content:'\f00a'; }}
gitのファイル状態別色分けにアイコンをつける
.tree-view-root span:after,
.tree-view-root li:after
{font-family: "Octicons Regular";margin-left: 5px;font-size:12px;position: relative;top: 1px;vertical-align: top;}
li.status-modified > span:before {color:#e2c08d !important;}
li.status-added > span:before {color:#73c990 !important;}
li.status-modified > span:after {content:'\f06d';}
li.status-added > span:after {content:'\f06b';}
.tree-view:focus .selected > span:before{color: #fff ;}
アクティブのタブの強調 notepadd++風
.tab-bar .tab{background: #3a3f4b;}
// .tab-bar .tab.active[data-type$="Editor"]{background: #3a3f4b;}
atom-pane-axis > atom-pane.active .tab.active:before, atom-pane-container > atom-pane.pane .tab.active:before{width:100%;height:4px;}
// .tab-bar .tab.active[data-type$="Editor"] {border-bottom:1px solid #568af2;box-sizing: border-box;}
.tab-bar .tab, .tab-bar .tab.active{max-width:min-content;padding: 0 15px;}
[pulsar色]に変更 アクティブタブとカーソル
.pane:focus-within .tab.active:before{background: #7e3dd0;}
.tab-bar .tab.modified:not(:hover) .close-icon{color:#7e3dd0;}
atom-text-editor .cursor{border-color: #7e3dd0;}
テーマ開発情報
| Ctrl + Shift + i | Developer Tool | View > Developer > Toggle Developer Tools |
| Ctrl + Shift + G | Octiconsのアイコン一覧などを確認できる | Styleguide:Show |
Install
Atomにインストールする場合はpulsarからインストールからインストールしマニュアルでフォルダをコピペする。パッケージが保存されるフォルダは以下C:\Users\ユーザー名\.atom\packages
Wish I could be Comic Sans
ついにマイコンピューターでインターネットを始めたの