[생산성 향상] Sublime Text 권장 패키지 & 단축키 모음 요약

안녕하세요, 저는 Sublime Text의 한마음 한뜻인 남자입니다.
저는 3~4년 정도 썼어요.
지금도 편리한 포장과 단축키가 저장되어 있습니다.
포장에 넣을 수 있다면 좋겠지만 단축키를 전혀 사용하지 않은 사람, 뭐든지 편집할 수 있는 사람이 Sublime Text의 좋은 점을 알았으면 좋겠어요.
개시하다
Sublime Text 다운로드
다음 URL에서 Sublime Text를 다운로드합니다.
Sublime Text
패키지를 설치하려면
Sublime Text가 설치되면 필요한 패키지가 설치됩니다.
1. command + shift + P에서 매크로 패키지를 설치하는 화면(명령 트레이)을 엽니다.install를 입력하고 Package Congrol:Install Package를 선택합니다.

설치할 패키지를 입력하고 선택합니다.
설치하는 동안 다운로드 중인 애니메이션이 화면 왼쪽 아래에 표시됩니다.
잃어버리면 설치 완료.

생산성 향상을 위한 권장 패키지
Emmet
작업 속도: 2배(작업 속도는 개인적인 소감입니다.)
HTML 태그 및 CSS 속성을 바로 가기로 설명할 수 있습니다.
또 태그 선택 등 단축키 기능이 보완됐다.
https://github.com/sergeche/emmet-sublime#available-actions
Goto-CSS-Declaration
작동 속도: 1.5배
HTML의 class(또는 id)에서 편집하려는 CSS(SCSS) 파일의 해당 위치로 순간적으로 이동할 수 있습니다.
복제목시와 반 검색의 번거로움을 줄였다.
Increment Selection
작동 속도: 1.3배
img_01、img_02...img_십방
시퀀스 단축키 기능을 보완합니다.abcde...의 번호도 가능합니다.
Select Quoted
작동 속도: 1.3배
따옴표의 단축키를 선택할 수 있습니다.
긴 문장도 질질 끌지 않기 때문에 이 소박함을 선택할 수 있다.
Smart Delete
작동 속도: 1.1배
줄 끝에서 공백을 삭제하면 다음 줄의 들여쓰기가 삭제됩니다.
줄 끝에 fn+delete를 더하면 들여쓰기를 삭제합니다.
TrailingSpaces
작동 속도: 1.1배
전각 공간과 기종 의존 문자의 강조 표시
오류, 부호화 등을 발견하는 데 도움이 된다.
AutoFileName
작동 속도: 2배
경로 참조를 추가합니다.
루트 경로의 설명에서 역할을 잘 발휘하지 못하지만 프로젝트 등록을 통해 효과적입니다.
https://www.sublimetext.com/docs/3/projects.html
SublimeCodic
작동 속도: 1.2배
일본어를 영어로 바꾸다.
프로그래머에게 제공된 명명 사전codic의 API 패키지를 사용합니다.이용하려면 코드에 로그인하고 방문 대화를 받아야 합니다.
1. command + shift + P에서 명령 트레이를 열고 Package Control: Add Repository를 선택합니다.
2. 입력 상자에 https://github.com/naoyukik/SublimeCodic를 입력합니다.
3. command + shift + P에서 명령 트레이를 열고 Package Control: Install Package를 선택하고 SublimeCodic를 입력하고 선택합니다.
4. 로그인codic하고 왼쪽 메뉴의 API 상태에서 액세스 토큰을 복사합니다.
[Preference]-[Package Settings]-[sublime Codic]-[settings-User]에서 다음을 설정합니다.

{
  "access_token": "＊＊コピーしたアクセストークン入力＊＊",
  "casing": "camel",
  "acronym_style": "camel strict"
}

5. 단축키 설정[Preference] - [Key Bindings]에서 다음을 추가합니다.

[
  //SublimeCodic：日本語を英語に変換
  {
    "keys": ["alt+t"], "command": "codic_translate_string", "args": {"casing": "camel"},
  }
]

사용법
1. 영어로 변환할 단어 선택alt + T
Codecs33
shift-jis 파일을 표시할 수 있습니다.
ConvertToUTF8
문자 인코딩을 UTF8로 변환합니다.
EditorConfig
규칙을 통일하는 데 쓰이는 문서.
↓기술방법
https://github.com/sindresorhus/editorconfig-sublime
https://editorconfig.org/
SublimeCodeIntel
모든 언어의 문법 강조와 자동 보완.
입력한 문자열의 자동 완성 등입니다.
HTML5
HTML 코드 완성
SCSS
SCSS의 보완.
SCSS Snippets
SCSS의 가벼운 운동.
SublimeLinter
오류 검사.
File Manager
사이드바 확장.
OmniMarkupPreviewer
Mardown을 미리 봅니다.
Monokai Extended
문법이 Markdown을 돋보이게 한다.
Markdown Extended
Markdown 내의 코드를 구문으로 강조 표시합니다.
가시성 향상 포장
BracketHighlighter
가시성: 1.5배
가시성 향상.강조[], (), {}, "", '', <tag></tag> 등괄호류
A File Icon
가시성: 1.1배
사이드바의 파일 아이콘을 변경합니다.

간편한 관리 패키지
FindKeyConflicts
반복되는 단축키를 표시합니다.
1. command + shift + P에서 명령 트레이를 열고 FindKeyConflicts:All Conflicts를 선택합니다.

[Preference] - [Key Bindings]에서 단축키를 지정합니다.

문법 하이라이트 계열의 포장
CSS3
CSS3 고라이터.
Babel
리액션 문법으로 썼어요.jsx 파일 문법을 강조할 수 있는 패키지입니다.
babel의 문법 하이라이트는 다음과 같다.
[View] - [Syntax] - [Babel] - [JavaScript (Babel)]
EJS 2
EJS에서 사용하는 문법 하이라이트.
※ 다른 템플릿 엔진을 사용하는 사용자는 설치 필요 없음

EJS 파일을 연 상태에서 명령 트레이를 열고 Set Syntax: EJS(<% %>)를 선택합니다.

단축키 목록
우선 버튼 귀속을 설정합니다.[Preferences]-[key Bindings]-[Default.sublime-keymap-User]에 다음과 같은 내용을 보충한다.

[
    // タグのみ削除
    { "keys": ["alt+shift+d"],"args": {"action": "remove_tag"},"command": "run_emmet_action","context": [{"key": "emmet_action_enabled.remove_tag"}]},

    // 選択部分をコード整形
    { "keys": ["super+shift+r"], "command": "reindent" , "args": { "single_line": false } },

    // タブ切り替え
    { "keys": ["ctrl+tab"], "command": "next_view" },
    { "keys": ["ctrl+shift+tab"], "command": "prev_view" },

    // 一つ前に開いていたページに戻る
    { "keys": ["super+ctrl+left"], "command": "next_view_in_stack" },

    // Class名やIDから使用しているCSSを検索
    {
        "keys": ["super+right"], "command": "goto_css_declaration",
        "args": {"goto": "next"}
    },
    {
        "keys": ["super+left"],  "command": "goto_css_declaration",
        "args": {"goto": "prev"}
    },

    // codic
    {
      "keys": ["alt+t"], "command": "codic_translate_string"
    },
    {
      "keys": ["alt+i"], "command": "codic_input_string"
    },
]

행 복사

복사된 행에 커서를 놓습니다command + shift + D.

행 선택

선택한 행에 커서를 놓습니다command + L.

여러 위치에 커서 놓기

command를 누르고 원하는 곳을 클릭

문자 선택
선택한 문자열 찾기 및 다중 선택
1. 문자 선택command + D이전 단계로 돌아가기
1. command + U뛰다
1. 건너뛸 문자를 선택한 상태command + K.
2. command + D
HTML에서 스타일에 맞는 SCSS로 순간 이동
사용 패키지: Goto-CCSS-Declation
작동 속도: 1.5배
1. 이동하려는 SCSS(CSS)를 연 상태에서 커서를 HTML 파일에서 해당 CSS의 클래스(ID) 이름에 맞춰command + control + →저는 command + →로 이동하고 싶어요.[Preferences]-[Package Settings]-[Goto-CSS-Declaration]-[Settings - User]에 다음과 같은 설정이 추가되었습니다.

[
    // Class名やIDから使用しているCSSを検索
    {
        "keys": ["super+right"], "command": "goto_css_declaration",
        "args": {"goto": "next"}
    },
    {
        "keys": ["super+left"],  "command": "goto_css_declaration",
        "args": {"goto": "prev"}
    }
]

리 태그로 글머리 기호 묶기

리 탭으로 둘러싸고 싶은 문자열 선택 control + option + enter

Enter Abbreavitation에 ul>li* 를 입력하고 Enter

선택한 여러 위치에 복사된 문자열 삽입
1. 문자열을 삽입할 위치에 커서를 놓습니다.
2. 삽입할 문자열 복사
3. 복사한 글의 행수와 선택한 부분이 일치하는지 확인하고 붙여넣기
※ 선택 부분과 문자열의 줄 수가 일치하지 않으면 삽입이 원활하지 않습니다.

태그만 삭제
1. 삭제할 태그 위에 커서를 놓습니다option + shift + D.
정상적으로 실행할 수 없을 때, 키 귀속을 설정해야 합니다.
키 바인딩 설정
1. [Preference]-[Key Bindings]-[sublime-keymap User]에 다음 내용 추가

{ "keys": ["alt+shift+d"],"args": {"action": "remove_tag"},"command": "run_emmet_action","context": [{"key": "emmet_action_enabled.remove_tag"}]},

<img src="http://mokichi.xyz/img/sublime/3.gif" alt="">

태그에 포함된 요소 선택
1. 선택할 요소가 포함된 태그 위에 커서를 놓습니다command + shift + A.

각 태그 선택
모드 1
1. 선택할 태그 위에 커서를 놓습니다control + J.
모드 2
1. 선택할 태그 또는 태그 요소에 커서를 두 번command + shift + A 놓습니다.
※ 커서 위치의 중첩 깊이에 따라 클릭 횟수가 증가합니다.

일련 번호 지정(증가분)
패키지 사용: Select Qodted
1. 여러 커서로 선택shift + command + P2. 명령 트레이에 "incredent Selection"을 입력합니다.

따옴표 내용 선택
패키지 사용: Select Qodted
1. 선택할 요소에 커서를 놓습니다command + shift + '（Pの右横の@）.
프레젠테이션처럼 Alt 콘텐츠를 한꺼번에 선택하고 Alt에 한꺼번에 가입할 수 있다.
※ 인용부호의 내용이 비어 있거나 한 글자만 있으면 선택할 수 없습니다.

시작 및 끝 태그 선택 및 변경
패키지 사용: Emmet
1. 변경할 태그 위에 커서를 놓습니다command + shift + K.

빈 태그 또는 따옴표 사이에 커서를 놓습니다.

control + option + ← or →

그림의 폭과 높이를 자연값으로 조정하기
이미지 선택control + shift + I
들여쓰기 성형
성형하고 싶은 축소 요소 선택command + shift + R
화면 분할alt + command + [1〜5]
패키지 목록 확인
command + shift + P 「Package Control: List Packages」
여러 창을 표시할 때 현재 창을 전환합니다command + F1끝맺다
텍스트 편집기는 자신의 취향에 따라 맞춤형으로 제작할 수 있기 때문에 익숙해지면 지금보다 작업 효율이 몇 배 높아진다.포장과 단축키 외에도 스티브 애완동물과 프로젝트에 등록해 더욱 효율적으로 일할 수 있다.
이 일대는 다음에 다시 이야기합시다!