WebStorm 사용방법 모음(사진 및 텍스트)

이 글은 WebStorm 사용 방법(사진 및 텍스트)을 모아 놓은 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 이미지 너비 및 높이 팁.

보통 HTML을 작성하다 img 태그를 만나면 너비와 너비를 알기 위해 많은 노력을 기울여야 합니까? 이미지의 높이? WS가 직접 표시됩니다.

2. 태그 리팩토링, 파일 이름 변경, CSS 리팩토링 및 JS 리팩토링

2.1 태그 리팩토링# 🎜🎜##🎜 🎜#

<p>此处省略200行</p>

을

<p>此处省略200行</p>

으로 변경하려면 어떻게 해야 하나요? WS에서는 커서를

또는

로 이동한 다음 재구성된 단축키를 누르면 쉽게 p 태그로 변경할 수 있습니다.

2.2 파일 이름 바꾸기

style1.css의 이름을 style2.css로 바꾸려고 하는데 style1.css가 많은 HTML 파일에서 참조됩니다. 어떻게 해야 합니까?

WS의 파일 이름 바꾸기 기능을 사용하여 이름을 과감하게 바꾸면 모든 참조가 자동으로 업데이트됩니다. (참조가 정확하고 관례적이라는 전제 하에)

2.3 CSS Refactoring

또한 인라인 스타일을 외부로 옮기고 싶은 경우 CSS 파일에서 , 이는 리팩토링 기능을 통해서도 달성할 수 있습니다. 프로덕션 환경에서는 HTML로 인라인 스타일을 작성하지 않더라도 디버깅 중에 편의를 위해 이 작업을 수행하는 경우가 많습니다. 디버깅을 마치면 자연스럽게 이 기능을 사용하게 됩니다.

(이 기능을 업데이트하려면 WS 8.0, 자세한 내용은 설명을 참조하세요.)

JS 리팩토링도 훌륭하게 작동합니다. 변수 이름 바꾸기, 선언 승격 등을 포함합니다. WS는 제가 사용해 본 JS 리팩토링을 위한 최고의 IDE입니다. JS 리팩토링을 잘 지원하는 다른 IDE가 무엇인지 알려주시면 비교해 보겠습니다.

3. 업계 최신 기술 지원

WS를 설치하면 다음을 찾을 수 있습니다. SASS, NodeJS, CoffeeScript 및 Jade에 대한 지원이 내장되어 있습니다.

에밋까지 내장되어 있고, 단축키는 Tab 이라 너무 편리해요. 이 기능이 없었다면 HTML을 작성하고 싶지도 않았을 것입니다.

파일 접미사가 ​​.less/.scss/.sass 또는 .coffee인 경우 자동으로 CSS 또는 js로 컴파일해야 하는지 묻습니다.
NPM이 있는 것으로 확인되면 간편한 관리 및 업그레이드를 위해 설치된 패키지가 자동으로 나열됩니다. (NodeJS 지원 플러그인 설치가 필요한 것 같습니다. 자체 기능이 있는지 기억이 나지 않습니다.)

4. 사용자 정의 가능한 코드 형식 지정 규칙# 🎜🎜#

많은 IDE에 포맷팅 기능이 있지만 WS 수준까지 커스터마이징이 가능한 IDE는 본 적이 없습니다.

{ } 한 줄을 유지할지 여부.

한 줄 기능을 유지할지 여부.

속성을 정렬해야 하는지 여부입니다.

콜론 앞뒤에 공백을 추가할지 여부입니다.

…

5. 설정 항목 검색 가능(영문)

"이 IDE에는 설정 항목이 너무 많아서 오랫동안 만지작거려야 해요! #🎜🎜 #WS는 이런 점을 고려하여 설정을 모두 검색 가능하게 하여 헛걸음하지 않고 설정하고 싶은 것을 검색할 수 있습니다. 모양을 설정하려면 모양을 검색하세요. 단축키를 설정하려면 키맵을 검색하세요.
플러그인을 설정하려면 플러그인을 검색하세요. 키맵 입력 시 2차 검색도 가능합니다. 예를 들어 포맷 기능의 단축키를 알고 싶다면 포맷을 직접 검색하시면 됩니다.

다른 방향으로 가서 Ctrl + L 단축키에 해당하는 기능을 검색할 수도 있습니다.

P.S. WS의 단축키는 보조 키 누르기를 지원합니다. 예를 들어 Git 추가 단축키를 Alt+G & Alt + A로 설정하고 Git 커밋 단축키를 Alt+G & Alt+C로 설정했습니다. 이것의 장점은 설정할 단축키가 없다는 것입니다.

6. 다른 IDE에도 있는 기능에 대해 이야기해 보겠습니다.

6.1. WS의 모든 편집 내용은 로컬에 저장되며 언제든지 기록 버전으로 복원할 수 있습니다.

단, 이러한 기록은 삭제될 수 있으니 주의하시기 바랍니다.

6.2. 포모도로 기법과 결합할 수 있습니다. 라는 플러그인이 있습니다. ​ Pomodoro-tm은 많은 프로그래머들이 좋아할 것입니다.

6.3. Redmine/Trello/Jira 등과 통합 가능.

6.4 파일 구조 분석. 그림을보세요.

JS 파일 구조

HTML 파일 구조

이 기능은 대용량 파일에 특히 유용합니다. 좋은 기능이 너무 많아서 기회되면 다시 소개하도록 하겠습니다.

위 내용은 WebStorm 사용방법 모음(사진 및 텍스트)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!