[VSCode] 소스 블럭 라인 시작-끝을 알려주는 설정 (without Extention)

[VSCode] 소스 블럭 라인 넣어주는 설정 NO 익스텐션

MacOS 기준입니다.  javascript, html 에 적용됩니다.

소스를 짜다보면 { 열린게 어디서 닫히는지 알고 싶다. 코드가 길어지면 상당히 알기 어려운데, 이를 쉽게 해주는 확장 프로그램입니다.

[결과] 를 먼저 보고 설치해봅시다.

        javascript 결과

         html 결과 : 태그 왼쪽에 세로 줄이 생깁니다.

1. 설정  : COMMAND + 콤마(,) 로 설정을 열어줍니다. 검색에서 bracket pair 를 입력합니다.

             Editor > Guides: Bracket Pairs 를 active로 변경합니다.

             설정을 저장하고 소스를 열어서 { 여기에 커서를 옮기면 아래와 같이 세로 줄이 } 여기까지 

             표시되는 것을 볼 수 있습니다. 

2. 샘플 소스 : 출처 https://subji.github.io/posts/2020/02/20/usefulljavascriptcodes

/**
 * 숫자값이 정수인지 여부를 반환하는 함수
 * @param { Number } value : 숫자 값
 * @return { Boolean } : 정수(true), 정수 아닐 경우(false)
 */
function isInt(value) {
  let parse = parseFloat(value);
  return !isNaN(value) && (parse | 0) === parse;
}
/**
 * 정수부에 3자리 마다 ',' 를 체크해주는 함수
 * @param { Integer } value : 정수 또는 실수 값
 * @return { String } : ',' 가 적용된 실수 또는 정수 문자열 값
 */
function addComma(value) {
  if (!isInt(value)) {
    let integer = value | 0;
    let floater = (value - integer).toFixed(2).toString().substring(1);
    return addComma(integer) + floater;
  } else {
    return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  }
}
/** 
 * 윤년 계산 메소드
 * @param { Integer } year : Date 객체의 년도
 */
Date.isLeafYear = function (year) {
  return (((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0));
};
/**
 * 윤년 계산 인터페이스
 */
Date.prototype.isLeafYear = function () {
  return Date.isLeafYear(this.getFullYear());
};
/**
 * 윤년을 포함한 해당 년도의 각 월수를 반환하는 메소드
 * @param { Integer } year : Date 객체의 년도
 * @param { Integer } month : Date 객체의 월 (0-11)
 */
Date.getDaysInMonth = function (year, month) {
  return [31, (Date.isLeafYear(year) ? 29 : 28), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
};
/**
 * 윤년을 포함한 해당 년도의 각 월수를 반환하는 인터페이스
 * @param { Integer } year : Date 객체의 년도
 * @param { Integer } month : Date 객체의 월 (0-11)
 */
Date.prototype.getDaysInMonth = function (year, month) {
  return Date.getDaysInMonth(this.getFullYear(), this.getMonth());
};
/**
 * Date 객체에서 N 개월만큼을 이동하는 메소드
 * @param { Integer } n : 변경할 개월 수
 */
Date.prototype.changeMonth = function (n) {
  let day = this.getDate();
  this.setDate(1);
  this.setMonth(this.getMonth() + n);
  this.setDate(Math.min(day, this.getDaysInMonth()));
  return this;
};
Date.prototype.changeWeek = function (n) {
  let day = this.getDate();
  this.setDate(day + (7 * n));
  return this;
};
/**
 * YYYY(구분자) MM(구분자) DD 와 같은 형태로 날짜를 반환하는 메소드, 기본 구분자는 '-'
 * @param { String } delimiter : 구분자
 */
Date.prototype.formatDate = function (delimiter) {
  let d = (this.getDate() > 9 ? '' : '0') + this.getDate();
  let m = ((this.getMonth() + 1) > 9 ? '' : '0') + (this.getMonth() + 1);
  delimiter = delimiter || '';
  return this.getFullYear() + delimiter + m + delimiter + d;
};

/**
 * YYYY-MM-DD hh24:mi:ss 변환
 */
Date.prototype.formatDateYMDHMS = function () {
  let d = (this.getDate() > 9 ? '' : '0') + this.getDate();
  let m = ((this.getMonth() + 1) > 9 ? '' : '0') + (this.getMonth() + 1);
  let h = (this.getHours() > 9 ? '' : '0') + this.getHours();
  let mi = (this.getMinutes() > 9 ? '' : '0') + this.getMinutes();
  let s = (this.getSeconds() > 9 ? '' : '0') + this.getSeconds();
  return this.getFullYear() + "-" + m + "-" + d + " " + h + ":" + mi + ":" + s;
};


/**
 * 날짜 변경 함수
 * @param { Date } beforeDate : 기준 날짜
 * @param { int } addNumber : 더하거나 뺄 값
 * @param { String } type : 년(y) 월(m) 일(d) 
 */
function dateAddDel(beforeDate, addNumber, type) {
  var yy = parseInt(beforeDate.substr(0, 4), 10);
  var mm = parseInt(beforeDate.substr(5, 2), 10);
  var dd = parseInt(beforeDate.substr(8), 10);

  if (type == "d") { //일
    d = new Date(yy, mm - 1, dd + addNumber);
  } else if (type == "m") { //월
    d = new Date(yy, mm - 1, dd + (addNumber * 31));
  } else if (type == "y") { //년
    d = new Date(yy + addNumber, mm - 1, dd);
  }

  yy = d.getFullYear(); // 19를 2019로 변경
  mm = d.getMonth() + 1;
  mm = (mm < 10) ? '0' + mm : mm; //월 변경  +1 하는 이유는 자바스크립트에서 0이 1월이라 
  dd = d.getDate();
  dd = (dd < 10) ? '0' + dd : dd; //10일 이전이면 숫자 자릿수 맞추기 위함

  return yy + '-' + mm + '-' + dd;
}