참고: PhpStorm에는 HTML, CSS, JavaScript와 관련된 WebStorm의 모든 기능이 포함되어 있습니다.
태그, 키워드, 라벨, 변수, 매개변수, 함수에 사용되는 JavaScript, HTML, CSS 코드 완성 기능은 DOM을 기반으로 하며, Firefox 및 Chrome 등 주요 브라우저의 고유 특징을 지원합니다.
완성 기능은 *.js 파일, HTML 이벤트 핸들러 및 기타 모든 적합한 컨텍스트에 있는 표준 함수와 사용자 지정 함수에 모두 사용할 수 있습니다.
Sass, SCSS, Less, Stylus, Compass, CoffeeScript, TypeScript, Dart 및 기타 최신 웹 개발 기술이 지원됩니다.
Live Editing Preview를 이용하면 시간과 키 입력 횟수를 크게 줄일 수 있습니다. 에디터와 브라우저에서 페이지를 열어 두 화면을 볼 수 있게 하고 JavaScript 디버그 세션을 실행하면서 Live Edit 기능을 활성화하세요. 코드 편집을 시작하면 코드 완성 팝업의 목록 옵션을 사용하는 경우에도 변경 내용을 브라우저에서 즉시 확인할 수 있습니다.
PhpStorm에서 변경 내용을 자동으로 저장하면, 브라우저에서 스마트한 방식으로 즉시 페이지를 업데이트하여 편집 내용을 보여줍니다.
File Watcher(파일 감시기)로 최신 웹 개발 언어를 JavaScript(CoffeeScript, TypeScript, Dart 등을 변환)나 CSS(Sass, SCSS, Less, Stylus, Compass 등을 변환)로 자동 컴파일/트랜스파일해 보세요.
에디터에서 Emmet(구 Zen Coding)의 모든 기능을 활용할 수 있습니다. 라이브 템플릿을 사용해 사용자 지정 줄임말(스니펫)을 정의하거나 PHP, HTML, CSS, JS 및 기타 다양한 언어에 적용되는 사전 정의된 줄임말을 사용해 보세요.
PhpStorm은 문제를 탐지하고 자동 수정을 제안합니다. 탐지되는 문제로는 누락된 필수 속성, 유효하지 않은 속성이나 잘못된 값, 링크 내 잘못된 파일 참조, 중복된 속성, 유효하지 않은 CSS 선택자 형식, 유효하지 않은 CSS 프로퍼티, 사용되지 않는 CSS 클래스 정의, 유효하지 않은 로컬 앵커 등이 있습니다.
JavaScript에 제공되는 리팩터링 기능을 사용하면 코드 구조를 쉽게 수정할 수 있을 뿐만 아니라 수정을 실행 취소할 수 있습니다. 제공되는 리팩터링 기능에는 Rename(이름 변경), Extract Variable/Function(변수/함수 추출), Inline Variable/Function(변수/함수 인라인화), Move/Copy(이동/복사), Safe Delete(안전한 삭제), Extract embedded script into file(포함된 스크립트를 파일로 추출) 등이 있습니다.
JavaScript 코드 품질 도구가 JavaScript 에디터에 통합되어 있어 코드를 편집하는 동시에 검사할 수 있습니다. Settings(설정)를 열어 JSLint/JSHint를 입력하고 검사를 사용 설정하면 해당 검사가 입력된 코드를 실시간으로 확인합니다.
PhpStorm은 저장소에서 이용할 수 있는 무료 플러그인으로 Node.js를 완벽하게 지원합니다. 지원되는 기능으로는 코드 완성, 강조 표시, 탐색, 오류 검사, 디버그, npm을 이용한 패키지 관리 등이 있습니다.
PhpStorm는 한 발 앞서 나가기를 즐기는 개발자들을 고려하여 ECMAScript Harmony를 지원합니다. 새 기능을 사용해 보려면 PhpStorm의 설정에서 ECMAScript Harmony를 JavaScript 언어 버전으로 설정하세요.
PhpStorm은 EJS 템플릿 엔진을 지원(구문 강조 표시, 입력 지원, 서식 지정 기능 등)하며 Handlebars 및 Mustache 템플릿에 서식 지정 및 구문 강조 표시를 비롯해 자동 태그 닫기 기능을 제공합니다.
Web Component도 기본 지원됩니다.
PhpStorm에서 제공하는 Angular 지원으로는 TypeScript나 ECMAScript 2015에서 사용할 수 있는 지시문 및 바인딩 코드 완성 및 탐색, 새 이벤트 속성 파악 기능이 있습니다.
Flow에서 JavaScript에 추가하는 유형 주석을 사용할 수 있습니다. 주석이 추가된 함수나 메서드를 사용할 때 코드 완성에서 유형이 지정된 매개변수의 정보를 얻게 됩니다.
PhpStorm에는 TypeScript 코드의 Linter인 TSLint가 통합되어 있습니다. TSLint를 사용 설정하면 코드를 입력할 때 TSLint의 경고 및 오류를 에디터에서 바로 확인할 수 있습니다.
Vue 템플릿 언어를 비롯해 .vue 파일의 스크립트 및 스타일 블록에서 선택한 언어에서 코딩 지원 기능을 사용해 보세요. PhpStorm은 Vue 컴포넌트를 자동으로 완성하고 해당 컴포넌트에 필요한 import 문을 추가합니다.