텍스트 에디터 Atom(아톰) 패키지 추천(file-icons)

시각적으로 파일관리를 편리하게 도와주는 file-icons

file-icons는 좌측이나 상단에 문서의 유형을 아이콘을 통해 시각적으로 구별하기 쉽게 만들어주는 패키지입니다.

이렇게 상단이나

왼쪽에 있는 네비게이션 부분의 문서들의 아이콘을 만들어줌으로써 시각적으로 어떤 파일인지 구별이 쉽게 만들어줍니다.

전에 소개드린 pigments와 함께 꼭 같이 사용하셨으면 할 패키지입니다.

설치법

아래는 file-icons의 명세입니다.

file-icons

If you've just updated and your icons are all messed up, please restart Atom before filing an issue.

Some of the underlying icon fonts have updated and rearranged their icons, a restart will fix this.

Installing

On the command line:

apm install file-icons

On Atom:

Go to Preferences > Install, search for file-icons and install it.

file-icons

Adds file specific icons to atom for improved visual grepping. Works with Tree View and Fuzzy Finder and Tabs.

A number of icons and colours are provided by default for a range of common file types. If you have file that you would like custom icons for you can easily add this yourself.

Icons are now specified via CSS (Less) only.

No Colours

Disable colours in the settings.

Unity Theme

By default the Unity theme hides icons, you can force to show the icons in the settings

Customisation

The following CSS can be added to your user stylesheet to customise files with the .rb file extension:

@import "packages/file-icons/styles/colors"; // to use the colours 
@import "packages/file-icons/styles/icons";  // to use the defined icons 

@import "packages/file-icons/styles/items";
@{pane-tab-selector}, .icon-file-text {
  &[data-name$=".rb"]          { .medium-red;             } // Colours icon and filename 
  &[data-name$=".rb"]:before   { .ruby-icon; .medium-red; } // Colours icon only 
}

Folders

@import "packages/file-icons/styles/items";
@{pane-tab-selector}, .icon-file-directory {
  &[data-name=".git"]:before { .git-icon; }
}

Icons

Icons are located at ./stylesheets/icons.less. You can create a custom CSS class and express its code through content: "\fxxx";. Octicons is the default icon's class.

.ruby-icon { content: "\f047"; }

Fonts

Some custom fonts are already provided

• FontAwesome(.fa)
• FontMfizz(.mf)
• Icomoon(.iconmoon)
• Devicons(.devicons)

.coffee-icon { .fa; content: "\f0f4"; }

Colours

Colours are from the Base16 colour palette. CSS classes used to apply color follow its primary 8 (eight) colours and 3 (three) variants:

• Red, Green, Yellow, Blue, Maroon, Purple, Orange, Cyan.
• Light, Medium, Dark.

Medium is colour provided by Base16. Light is medium lightened 15%. Dark is medium darkened 15%. In order to "construct" a CSS class color, you provide its variant followed by a dash (-).

.light-red;
.medium-blue;
.dark-maroon;

Changelog

See CHANGELOG.md.

Acknowledgments

Wouldn't have even tried to make this if it weren't for sommerper/filetype-color Also thanks to all the contributors.

I think this package is bad news.

Good catch. Let us know what about this package looks wrong to you, and we'll investigate right away.