개요

아래의 쉘스크립트는 문법을 검사해주고, 코드 컨벤션(띄어쓰기, 탭 크기, 함수 선언방식)을 일정하게 유지시켜주는 툴을 설치하는 스크립트입니다.

먼저 프로젝트 폴더를 생성한 후, 해당 폴더의 루트로 cd 합니다. 이후 아래 코드를 터미널에 붙여넣어 실행하면 es-lint, prettier가 설치되고, 기본적인 설정파일도 자동으로 생성해 줍니다. vscode와 연동하기 위해서는 관련 vscode-extension이 필요한데, 이것도 쉘스크립트로 설치해줍니다.

관련하여 오류나 버그를 발견하시거나 궁금한 사항이 있을 시 언제든지 연락주시기 바랍니다.

shell script

아래 코드를 터미널에 붙여넣으세요

npm install -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-node eslint-config-node prettier prettier-plugin-solidity
npx install-peerdeps --dev eslint-config-airbnb
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode


mkdir .vscode

echo '{
  "eslint.validate": [
    "javascript"
  ],
  "eslint.format.enable": true,
  "eslint.run": "onSave",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
}' > .vscode/settings.json

echo '{
  "printWidth": 80,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "semi": true,
  "arrowParens": "always"
}' > .prettierrc

echo '{
  "env": {
    "commonjs": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "airbnb-base",
    "prettier",
    "plugin:node/recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": [
    "prettier"
  ],
  "overrides": [],
  "parserOptions": {
    "ecmaVersion": "latest"
  },
  "rules": {
    "prettier/prettier": "error",
    "no-unused-vars": "warn",
    "no-console": "off",
    "func-names": "off",
    "class-methods-use-this": "off",
    "no-plusplus": "off",
    "no-param-reassign": "warn"
  },
  "globals": {
    "describe": true,
    "it": true,
    "test": true
  }
}' > .eslintrc.json

vscode-extenstion

위의 셸스크립트를 실행하면 익스텐션도 자동으로 설치해줍니다.
만약 설치가 되어 있지 않다면 수동으로 설치해주세요.

1. vscode-eslint 플러그인 을 설치하세요.
2. vscode-prettier 플러그인 도 설치해주세요.

이제 모든 설정이 끝났습니다.