코카티비-CoCaTV

코딩ㆍ개발 정보/HTML 연습

[sublimetext] 코드 정렬 애드온

RioRex 2024. 7. 25.
sublime text 3 사용하여 asp와 웹 페이지를 만들고 있데, 인덴트 등을 정렬하고 싶어, 어떤 경우 asp의 주석 같은 경우를 만나면 들여쓰기가 깨지는 경우들도 있고 하던데, asp, html, css, js 등을 태그 정렬하는 방법을 추천해줘

 

Sublime Text 3에서 ASP, HTML, CSS, JS 등의 코드를 정렬하고 들여쓰기를 맞추는 방법을 아래에 설명하겠습니다.

방법1: HTML-CSS-JS Prettify

1. HTML-CSS-JS Prettify 설치

HTML, CSS, JS 코드를 정렬하는 데 도움이 되는 패키지입니다.

  1. Preferences > Package Control > Install Package를 클릭합니다.
  2. "HTML-CSS-JS Prettify"를 검색하여 설치합니다.

2. Pretty HTML Plugin 설치

ASP 파일 및 HTML 파일의 코드 정렬에 유용한 플러그인입니다.

  1. Preferences > Package Control > Install Package를 클릭합니다.
  2. "Pretty HTML"를 검색하여 설치합니다.

3. 사용자 설정 구성

HTML-CSS-JS Prettify와 Pretty HTML 플러그인의 설정을 사용자 정의합니다.

  1. Preferences > Package Settings > HTML-CSS-JS Prettify > Settings - User를 클릭합니다.
  2. 다음 설정을 추가합니다.
{
    "indent_size": 4,
    "indent_char": " ",
    "brace_style": "collapse",
    "indent_scripts": "normal"
}

 

  1. Preferences > Package Settings > HTML-CSS-JS Prettify > Settings - User를 클릭합니다.
  2. 다음 설정을 추가합니다.
{
    "indent_size": 4,
    "max_char": 80,
    "brace_style": "collapse",
    "preserve_newlines": true,
    "wrap_line_length": 0
}

 

4. 주석 처리된 코드 정렬 문제 해결

주석 처리된 코드의 들여쓰기를 유지하려면 Pretty HTML 설정을 다음과 같이 조정합니다.

  1. Preferences > Package Settings > Pretty HTML > Settings - User를 클릭합니다.
  2. 다음 설정을 추가합니다.
{
    "indent_size": 4,
    "max_char": 80,
    "brace_style": "collapse",
    "preserve_newlines": true,
    "wrap_line_length": 0,
    "unformatted": ["code", "pre", "em", "strong", "span"]
}

 

이제 ASP, HTML, CSS, JS 등의 코드가 잘 정렬되고 들여쓰기가 맞춰질 것입니다. Sublime Text 3의 설정을 통해 코드의 가독성을 높이고 효율적인 개발 환경을 만들 수 있습니다.

 
HTML, CSS, JS 코드를 정렬하는 방법을 위해 다른 패키지를 사용할 수 있습니다

방법2: JsPrettier

1. JsPrettier 설치

JsPrettier는 JavaScript, HTML, CSS 코드를 자동으로 포맷팅해주는 패키지입니다.

  1. Preferences > Package Control > Install Package를 클릭합니다.
  2. "JsPrettier"를 검색하여 설치합니다.

2. Emmet 설치

Emmet은 HTML 및 CSS 코드 작성 속도를 높이는 도구로, 코드 정렬 및 자동 완성 기능도 제공됩니다.

  1. Preferences > Package Control > Install Package를 클릭합니다.
  2. "Emmet"을 검색하여 설치합니다.

3. SublimePrettyJSON 설치

JSON 데이터를 다루는 경우 유용한 패키지입니다.

  1. Preferences > Package Control > Install Package를 클릭합니다.
  2. "SublimePrettyJSON"을 검색하여 설치합니다.

JsPrettier 설정

JsPrettier를 사용하여 HTML, CSS, JS 코드를 정렬하는 방법을 설명합니다.

  1. Preferences > Package Settings > JsPrettier > Settings - User를 클릭합니다.
  2. 다음 설정을 추가합니다.
{
    "prettier_cli_path": "/usr/local/bin/prettier",
    "auto_format_on_save": true,
    "allow_inline_formatting": true,
    "html_whitespace_sensitivity": "ignore",
    "tab_width": 4,
    "use_tabs": false
}

 

Emmet 설정

Emmet은 별도의 설정 없이 설치 후 바로 사용할 수 있습니다. HTML, CSS 파일에서 Emmet 기능을 활용하면 코드 작성이 더욱 효율적입니다.

예제

아래에 간단한 HTML, CSS, JS 코드 예제를 사용하여 JsPrettier와 Emmet의 기능을 확인할 수 있습니다.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Sample Page</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <!-- This is a comment -->
    <div class="container">
        <h1>Hello, World!</h1>
        <p>This is a sample page.</p>
    </div>
    <script src="script.js"></script>
</body>
</html>
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

.container {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
}
document.addEventListener('DOMContentLoaded', function() {
    console.log('Hello, World!');
});

 

이제 Sublime Text 3에서 JsPrettier와 Emmet을 사용하여 코드를 작성하고 정렬하면 됩니다.

 

반응형
저작자표시 비영리 변경금지

'코딩ㆍ개발 정보 > HTML 연습' 카테고리의 다른 글

[CSS] position 속성 예제  (0) 2024.07.25
[JAVASCRIPT] 거꾸로 가는 시간 만들기  (0) 2024.07.25
[sublimeText] 코드 찾아가기 애드온  (0) 2024.07.25
[HTML] Viewport, DPR, 가로, 세로 다르게 지정  (0) 2024.07.25
[CSS] 스타일시트 팁 30가지  (0) 2024.07.24

댓글

티스토리툴바