[NEXTSTEP 자바스크립트 클린코드 2기] 환경설정

eslint, prettier 설치

npm install -D eslint eslint-config-airbnb-base eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier prettier​

우선 eslint와 Prettier를 설치해준다.

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: ['eslint:recommended', 'airbnb-base', 'prettier'],
  plugins: ['prettier'],
  rules: {
    'import/prefer-default-export': 'off',
    'import/extensions': ['off'],
    'class-methods-use-this': 'off',
    'no-alert': 'off',
    'no-undef': 'off',
    'no-new': 'off',
  },
};

eslint 내용을 작성해준다.

 

추가적으로 numeric-separators을 활용하고 싶다면 추가적인 설정이 필요하다.

  parserOptions: {
    ecmaVersion: 2021,
  },

 numeric-separators이 ecma 2021 버전에서만 동작하기 때문에  numeric-separators을 사용하고 싶다면 eslintrc에 추가!

 

.prettierrc.js

module.exports = {
  singleQuote: true,
  semi: true,
  useTabs: false,
  tabWidth: 2,
  trailingComma: 'all',
  printWidth: 100,
  bracketSpacing: true,
  arrowParens: 'avoid',
};

prettierc 파일도 작성!

 

Cypress 설치

npm install cypress --save-dev

후에 만약 cypress 폴더랑 cypress.json 파일이 생성되지 않으면

npx cypress open

위의 명령어를 통해서 cypress 폴더랑 cypress.json 파일을 생성

cypress-watch-and-reload 설치

cypress로 TDD를 할 때, 코드가 저장될 때 마다 테스트를 돌리고 싶다면 해당 라이브러리를 설치해서 설정해야 한다.

 

cypress.json 설정

{
  "video": false,
  "baseUrl": "http://localhost:8080",
  "cypress-watch-and-reload": {
    "watch": "src/js/*"
  }
}

baseUrl은 live-server했을 때 구동되는 포트번호로 맞춰서 쓰면된다.

video: false는 테스트 실패 시 테스트 실패에 관한 비디오를 만드는 것인데, 용량을 위해서 사용하지 않는다.

cypress-watch-and-reload 설치

npm install cypress-watch-and-reload

cypress/plugins/index.js 파일 수정

/// <reference types="cypress" />
// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************

// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)

module.exports = (on, config) => {
  // https://github.com/bahmutov/cypress-watch-and-reload
  // eslint-disable-next-line global-require
  require('cypress-watch-and-reload/plugins')(config);
  // IMPORTANT: return the config object
  // because the plugin might have changed it
  return config;
};

 

cypress/integration/_.spec.js 파일 생성

describe('자동차 경주 게임', () => {
  it('테스트1', () => {
    expect(true).to.be(false);
  });
});

 

 

그리고 열심히 개발을 진행하면 된다...!