코딩ㆍ개발 정보/HTML 연습

[sublimeText] 코드 찾아가기 애드온

RioRex 2024. 7. 25.
sublimetext 3 버전을 사용하여 웹 페이지및 css, js를 편집중인데, 소스에 포한된, css 파일이나, js의 함수를 클릭해서 해당 소스로 이동하고 싶거든, 그런 애드온이 있을까?

 

Sublime Text 3에서 웹 페이지 및 CSS, JS 파일을 편집할 때, 특정 CSS 파일이나 JS 함수로 빠르게 이동할 수 있는 여러 가지 유용한 플러그인이 있습니다. 다음은 그런 기능을 제공하는 몇 가지 플러그인입니다:

1. Goto Definition

  • 기능: 이 플러그인은 함수 정의나 CSS 클래스/아이디 정의로 빠르게 이동할 수 있게 해줍니다.
  • 설치 방법:
    1. Sublime Text 3에서 Ctrl+Shift+P를 눌러 Package Control: Install Package를 선택합니다.
    2. Goto Definition을 검색하고 설치합니다.

2. All Autocomplete

  • 기능: 파일 내뿐만 아니라 열려있는 모든 파일에서 자동 완성을 제공합니다. 함수 이름이나 CSS 클래스/아이디 이름을 더 쉽게 찾고 이동할 수 있습니다.
  • 설치 방법:
    1. Ctrl+Shift+P를 눌러 Package Control: Install Package를 선택합니다.
    2. All Autocomplete를 검색하고 설치합니다.

3. JsPrettier

  • 기능: JavaScript 코드를 더 잘 읽을 수 있게 포맷팅해줍니다. 잘 정리된 코드는 함수나 변수 정의를 더 쉽게 찾을 수 있게 도와줍니다.
  • 설치 방법:
    1. Ctrl+Shift+P를 눌러 Package Control: Install Package를 선택합니다.
    2. JsPrettier를 검색하고 설치합니다.

4. SideBar Enhancements

  • 기능: 사이드바에서 파일을 더 쉽게 열고 관리할 수 있게 해줍니다. 파일 간의 이동이 더 편리해집니다.
  • 설치 방법:
    1. Ctrl+Shift+P를 눌러 Package Control: Install Package를 선택합니다.
    2. SideBar Enhancements를 검색하고 설치합니다.

5. SublimeCodeIntel

  • 기능: 이 플러그인은 코드 탐색을 강화해줍니다. 함수를 클릭하면 해당 정의로 이동할 수 있습니다.
  • 설치 방법:
    1. Ctrl+Shift+P를 눌러 Package Control: Install Package를 선택합니다.
    2. SublimeCodeIntel을 검색하고 설치합니다.

이 플러그인들을 설치하면 웹 페이지를 편집할 때 CSS 파일이나 JS 함수로 빠르게 이동하는 것이 훨씬 수월해질 것입니다. 각 플러그인의 사용법은 다를 수 있으니, 설치 후 제공되는 문서를 참고하여 필요한 기능을 활용하세요.

 

반응형

댓글