Jenkins로 CI/CD Pipeline 구축하기 - 13. Coding Convention

Jenkins로 CI/CD Pipeline 구축하기 - 12. code coverage - Jest 설치 테스트

 

 eslint airbnb, prettier 적용하기

 

"eslint는 코드 퀄리티를 보장하도록 도와주고, prettier는 코드 스타일을 깔끔하게 혹은 통일되도록 도와준다."

 

 

npx install-peerdeps --dev eslint-config-airbnb

eslint airbnb 규칙을 사용하기 위해 필수 종속성 까지 한번에 받습니다.

 

 

npm install --save-dev typescript eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser

TypeScript 관련 패키지도 받아줍니다.

 

 

npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier

Prettier 관련 패키지를 받아줍니다.

 

 

.eslintrc.js Setting

module.exports = {
  root: true,
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint", "prettier"],
  parserOptions: {
    project: "./tsconfig.json",
  },

  env: {
    node: true,
  },

  extends: [
    "airbnb",
    "airbnb-typescript",
    "plugin:prettier/recommended",
    "plugin:@typescript-eslint/recommended",
  ],

  ignorePatterns: [".eslintrc.js"], 
  // Failed to load config "@typescript-eslint/parser" to extend from. 
  // eslint가 .eslintrc.js파일이 구성에 포함되어 있지 않더라도 lint를 시도하기 때문에 오류가 발생합니다.

  rules: {
    "react/jsx-props-no-spreading": "off",  
    //  Error: Prop spreading is forbidden  react/jsx-props-no-spreading
    "react/react-in-jsx-scope": "off",
    // 'React' must be in scope when using JSX 에러 지우기(Next.js)
    "react/jsx-filename-extension": [1, { extensions: [".ts", ".tsx"] }],  
    // ts파일에서 tsx구문 허용(Next.js)
    "no-unused-vars": 'warn', 
    // 정의 후 사용하지 않은 변수는 경고만 하기
    "no-console": 0, 
    // console 사용하기
    "import/prefer-default-export": ['off'], 
    // export const 문을 쓸때 에러를 내는 rule 해제
    "import/extensions": 0,
    // ts 파일을 불러오기 위해
  },
};

 

 

.prettierrc.js Setting

module.exports = {
  printWidth: 80, //코드 한줄 최대치
  semi: true, //코드 마지막에 세미콜론
  singleQuote: false, //문자열을 작은따옴표로 작성할것인지(false = 큰 따옴표)
  trailingComma: 'all', //객체나 배열 등에 맨 마지막에도 콤마
  tabWidth: 2, //들여쓰기 2칸(스페이스 2칸)
  bracketSpacing: true, //객체 리터럴에서 괄호에 공백 삽입 여부
  endOfLine: 'auto',  // EoF 방식, OS별로 처리 방식이 다름 
  useTabs: false, //탭 대신 스페이스
  arrowParens: 'avoid', // 화살표 함수에서 매개변수를 하나만 받을때 괄호 생략
};

 

 

 

Jenkinsfile Setting - Lint stage 추가

 

 

 

 

Prettier 전체옵션

{
  "arrowParens": "avoid", // 화살표 함수 괄호 사용 방식
  "bracketSpacing": false, // 객체 리터럴에서 괄호에 공백 삽입 여부 
  "endOfLine": "auto", // EoF 방식, OS별로 처리 방식이 다름 
  "htmlWhitespaceSensitivity": "css", // HTML 공백 감도 설정
  "jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부 
  "jsxSingleQuote": false, // JSX에 singe 쿼테이션 사용 여부
  "printWidth": 80, //  줄 바꿈 할 폭 길이
  "proseWrap": "preserve", // markdown 텍스트의 줄바꿈 방식 (v1.8.2)
  "quoteProps": "as-needed" // 객체 속성에 쿼테이션 적용 방식
  "semi": true, // 세미콜론 사용 여부
  "singleQuote": true, // single 쿼테이션 사용 여부
  "tabWidth": 2, // 탭 너비 
  "trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
  "useTabs": false, // 탭 사용 여부
  "vueIndentScriptAndStyle": true, // Vue 파일의 script와 style 태그의 들여쓰기 여부 (v1.19.0)
  "parser": '', // 사용할 parser를 지정, 자동으로 지정됨
  "filepath": '', // parser를 유추할 수 있는 파일을 지정
  "rangeStart": 0, // 포맷팅을 부분 적용할 파일의 시작 라인 지정
  "rangeEnd": Infinity, // 포맷팅 부분 적용할 파일의 끝 라인 지정,
  "requirePragma": false, // 파일 상단에 미리 정의된 주석을 작성하고 Pragma로 포맷팅 사용 여부 지정 (v1.8.0)
  "insertPragma": false, // 미리 정의된 @format marker의 사용 여부 (v1.8.0)
  "overrides": [ 
    {
      "files": "*.json",
      "options": {
        "printWidth": 200
      }
    }
  ], // 특정 파일별로 옵션을 다르게 지정함, ESLint 방식 사용
}

 

 

참조

https://velog.io/@luna_runa/Next.js-TypeScript-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-ESLintAirbnb-Prettier-%EC%84%A4%EC%A0%95