이틀 안에 코드 미용사를 만든 방법

최근에 코드 미화 도구의 와이어 프레임 다이어그램을 설계했습니다. 그 다음날, 나는 그것을 실제 도구로 바꾸기로 결정했습니다. 전체 프로젝트는 이틀 이내에 완료되었습니다.

나는 새로운 코드 미화 도구를 구축하는 것에 대해 생각하고 있습니다. 아이디어는 독특하지는 않지만 다른 사람의 도구를 사용할 때마다 같은 설정을 반복해서 반복하고 매번 광고를 피할 수 있습니다. ?? ‍

번거 로움없이 간단하고 사용하기 쉬운 도구를 원했기 때문에 지난 주에 종이를 가져 와서 와이어 프레임을 스케치하기 시작했습니다. 나는 손으로 와이어 프레임을 그리는 것을 정말로 좋아합니다. 연필과 종이로 디자인 된 내 뇌는 화면을 응시하는 것보다 더 잘 작동합니다.

와이어 프레임을 그린 후 즉시 영감을 받았습니다. 그 다음날, 나는 매일 일에서 시간을내어 현실로 바꿨습니다. ??인?

결과를 봅니다

설계

코드 편집기가 도구의 초점이되기를 원하므로 제어 모드 (예 : HTML, CSS, JavaScript) 및 설정을 위해 상단에 슬림 메뉴 표시 줄을 만들었습니다. 나는 또한 "About"버튼을 추가했습니다.

편집기 자체는 대부분의 화면을 차지하지만 배경과 잘 어울리므로 거의 눈치 채지 못합니다. 폐기물 공간에 지침을 사용하는 대신 타이핑을 시작할 때 사라지는 자리 표시자를 사용했습니다.

하단에서 현재 모드, 들여 쓰기 설정, 줄 수, 문자 수 및 바이트의 문서 크기를 포함하여 코드에 대한 실시간 통계를 표시하는 상태 표시 줄을 만들었습니다. 상태 표시 줄의 오른쪽에 명확하고 깨끗하고 복사 버튼이 있습니다. 중간에는 내 서비스를 과시하는 로고가 있습니다.

많은 개발자들이 전화기에 코드를 작성할 것이라고 생각하지 않지만 여전히이 도구가 모바일 장치에서 실행되기를 원합니다. 일반적으로 사용되는 반응 형 기술 외에도 화면이 너무 좁아지면 창 크기를 모니터링하고 탭 위치를 조정해야했습니다.

수직 크기 조정을 위해 Flexbox 및 Viewport 장치를 사용합니다. 약간의 iOS 문제를 제외하고는 실제로 쉽게 수행 할 수 있습니다. 다음은 기본 와이어 프레임을 보여주는 펜입니다. 제목과 바닥 글 사이의 사용하지 않은 공간을 채우기 위해 텍스트 영역이 어떻게 확장되는지 주목하십시오.

JavaScript 탭을 보면 iOS 문제 및 솔루션이 표시됩니다. 그러한 기능을 감지하는 방법을 잘 모르겠으므로 이제는 간단한 장치 검사 일뿐입니다.

설정 처리

가장 일반적으로 사용되는 설정에 액세스하기 쉽지만 각 모드에 대한 고급 설정도 노출되기를 원합니다. 이를 위해 더 고급 설정에 대한 링크가있는 설정 버튼을 팝업으로 만들었습니다. 설정을 변경하면 UI가 즉시 업데이트되고 설정은 오랫동안 LocalStorage에 저장됩니다.

여기에 vue.js를 사용하고 있습니다. 각 설정은 데이터 속성에 매핑되며 그 중 하나가 변경되면 UI가 업데이트되고 (필요한 경우) SaveSettings () 호출됩니다. 대략 이것은 이렇게합니다.

 함수 savesettings () {
  const 설정 = {};

  // settostostore는 지속될 속성 이름의 배열입니다. // "this"는 현재 vue 모델 settostostore.map을 나타냅니다 (key => settings [key] = this [key]);
  localStorage.setitem ( 'settings', json.stringify (settings));
}

각 설정은 LocalStorage와 동기화되는 데이터 속성입니다. 이것은 다소 원시적 인 상태 저장 방식이므로 나중에 Vuex와 같은 상태 관리 라이브러리를 사용하도록 응용 프로그램을 업데이트 할 수 있습니다.

설정을 복원하려면 응용 프로그램이 시작될 때 실행되는 RestorEsettings () 함수가 있습니다.

 함수 복원 세트 팅 () {
  const json = localStorage.getItem ( 'settings');

  if (json) {
    노력하다 {
      const settings = json.parse (json);

      Object.keys (설정) .foreach (key => {
        if (settingstostore.includes (key)) {
          이 [키] = 설정 [키];
        }
      });
    } catch (err) {
      window.alert ( '이전 설정을로드 오류');
    }
  }
}

이 기능은 LocalStorage에서 설정을 가져 와서 하나씩 적용하여 Settostostore의 유효한 설정 만 가져옵니다.

고급 설정 링크는 각 모드 탭에서 대화 상자를 엽니 다. 총 30 개가 넘는 설정에도 불구하고 모든 것이 정리되고 액세스 할 수 있으므로 사용자는 압도적이라고 느끼지 않습니다.

테마를 적용하십시오

다크 모드는 요즘 매우 인기가 있으므로 기본적으로 활성화됩니다. 그것을 좋아하는 사람들에게는 밝은 색상 테마도 있습니다. 팝업 및 대화 상자를 제외한 전체 UI가 변경됩니다.

최근 Firefox 67에 발생한 prefers-color-scheme 사용을 고려했지만 버튼을 전환하기로 결정했습니다. 컬러 테마 환경 설정 쿼리에 대한 브라우저의 지원은 그리 좋지 않으며 개발자는 이상합니다. (예를 들어, 나는 밝은 테마가있는 MacOS를 사용하지만 텍스트 편집기는 어둡습니다.)

함수를 정의하십시오

피처 포인트를 쉽게 생각해 내기가 쉽습니다. 초기 버전의 기능을 제한하기는 어렵습니다. 내가 바로 게시 한 가장 관련성이 높은 기능은 다음과 같습니다.

• HTML, CSS 및 JavaScript 코드를 아름답게하십시오
• 레이블/브래킷 일치로 구문 강조 표시
• 코드를로드하려면 파일을 붙여 넣거나 드래그 앤 드롭합니다.
• 붙여 넣은 코드 또는 드래그 앤 드롭 파일을 기반으로 들여 쓰기 환경 설정을 자동으로 감지합니다.
• 밝고 어두운 테마
• 한 클릭 청소 및 복사
• 키보드 단축키
• 대부분의 JS Beautify 옵션은 구성 가능합니다
• 설정은 LocalStorage에 무기한으로 저장됩니다
• 최소 UI, 광고가 없음 (내 서비스를위한 눈에 띄지 않는 홍보)?

나는 또한 재미를 위해 부활절 달걀을 추가했습니다. 페이지를 새로 고치고 바로 가기를 탐색 한 후 Facebook 또는 Twitter에서 공유하여 찾아보십시오. ?

내가 사용하는 도구 및 라이브러리

나는 vue.js를 정말 좋아합니다. 이 프로젝트에는 너무 많을 수도 있지만 Vue Cli를 사용하면 간단한 명령으로 모든 최신 도구로 구축을 시작할 수 있습니다.

 Vue는 아름다운 코드를 만듭니다

스캐 폴딩을 구축하는 데 시간을 낭비 할 필요가 없었기 때문에이 도구를 빨리 구축하는 데 도움이되었습니다. 또한 VUE는 실시간 통계, 테마 변경, 스위칭 설정 등에 매우 편리합니다. 버튼, 폼 요소, 팝업 및 대화 상자와 같은 다양한 요소 UI 구성 요소를 사용했습니다.

편집자는 Codemirror에 의해 구동되며 사용자 정의 스타일을 사용합니다. 이것은 브라우저 내 코드 편집에 적극 권장하는 잘 지원되고 훌륭한 프로젝트입니다.

모든 미화를 수행하는 도서관을 JS Beautify라고하며 JavaScript, HTML 및 CSS를 처리합니다. JS Beautify는 클라이언트 측에서 실행 되므로이 응용 프로그램은 실제로 백엔드가 없습니다. 브라우저는 모든 작업을 수행합니다!

JS Beautify는 사용하기가 매우 쉽습니다. npm install js-beautify 및 해당 기능을 통해 코드를 실행하십시오.

 'JS-Beautify'에서 아름다움을 가져 오십시오.

const code = '당신의 코드는 여기';
const 설정 = {
  // 여기에서 설정
};

// html
const html = beautiful.html (코드, 설정)

// CSS
const css = beautiful.css (코드, 설정)

// JavaScript
const js = beautiful.js (코드, 설정)

각 함수는 아름다운 코드를 포함하는 문자열을 반환합니다. 자신의 설정을 전달하여 각 언어의 출력 방법을 변경할 수 있습니다.

나는 비슷한 도구 인 Pretier에 대해 여러 번 물었다. 수요가 충분히 크면 JS Beautify와 Pretier 사이를 전환 할 옵션을 추가하는 것이 좋습니다.

이전 에이 라이브러리를 사용 했으므로 통합은 실제로 매우 쉽습니다. ?

이 프로젝트는 내 응용 프로그램 초현실적 인 CMS 덕분입니다. 정적 웹 사이트를위한 훌륭한 CMS를 찾고 있다면 개인, 교육 및 비영리 사이트에 무료입니다!

오, 내가 사용하는 어떤 편집기를 알고 싶다면 ... 비주얼 스튜디오 코드입니다. ??인?

위 내용은 이틀 안에 코드 미용사를 만든 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!