WebStorm 사용방법 모음(사진 및 텍스트)-webstorm-php.cn

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

不言

풀어 주다： 2018-09-29 14:10:30

앞으로

14256명이 탐색했습니다.

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

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

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

보통 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로 인라인 스타일을 작성하지 않더라도 디버깅 중에 편의를 위해 이 작업을 수행하는 경우가 많습니다. 디버깅을 마치면 자연스럽게 이 기능을 사용하게 됩니다.

WebStorm 사용방법 모음(사진 및 텍스트) (이 기능을 업데이트하려면 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는 이런 점을 고려하여 설정을 모두 검색 가능하게 하여 헛걸음하지 않고 설정하고 싶은 것을 검색할 수 있습니다. WebStorm 사용방법 모음(사진 및 텍스트) 모양을 설정하려면 모양을 검색하세요. 단축키를 설정하려면 키맵을 검색하세요.
플러그인을 설정하려면 플러그인을 검색하세요. 키맵 입력 시 2차 검색도 가능합니다. 예를 들어 포맷 기능의 단축키를 알고 싶다면 포맷을 직접 검색하시면 됩니다.