{"componentChunkName":"component---src-templates-blog-post-js","path":"/development/ESLINT-airbnb-코드스타일-적용하기/","result":{"data":{"site":{"siteMetadata":{"title":"JULog","author":"[Ju Chan Hwang]","siteUrl":"https://julog.netlify.app","comment":{"disqusShortName":"","utterances":"JuChanHwang/gatsby-starter-bee"},"sponsor":{"buyMeACoffeeId":"jbee"}}},"markdownRemark":{"id":"0fe7bd9a-37de-54fa-b000-df21fb620d71","excerpt":"ESLint (?) Linting tools like ESLint allow developers to discover problems with their JavaScript code without executing it. The primary reason ESLint was created was to allow developers to create their own linting rules. 출처: https://eslint.org/docs/about…","html":"

ESLint (?)

\n
\n

Linting tools like ESLint allow developers to discover problems with their JavaScript code without executing it. The primary reason ESLint was created was to allow developers to create their own linting rules.

\n

출처: https://eslint.org/docs/about/

\n
\n

쉽게 말하면 문제가 있는 패턴이나 코드를 찾기 위해 사용되는 정적 분석 툴이다.

\n

ESLint 설치하기

\n
$ cd <project-folder>\n$ npm init -y\n\n$ npm install -g eslint
\n
$ eslint --init\n\n? How would you like to configure ESLint? Use a popular style guide\n? Which style guide do you want to follow? airbnb\n? What format do you want your config file to be in? JavaScript
\n

설치를 완료했다면, airbnb 스타일을 사용하기 위해 설치해야할 다른 패키지들이 있다.

\n
$ npm info \"eslint-config-airbnb@latest\" peerDependencies\n{ eslint: '^4.19.1 || ^5.3.0',\n  'eslint-plugin-import': '^2.14.0',\n  'eslint-plugin-jsx-a11y': '^6.1.1',\n  'eslint-plugin-react': '^7.11.0' }
\n

패키지가 설치되어있다면 다음 명령어를 실행한다.

\n
$ yarn add eslint-config-airbnb\nor\n$ npm i eslint-config-airbnb
\n

그리고, 폴더에 .eslintrc.js 파일을 생성한다.

\n
module.exports = {\n  env: {\n    browser: true,\n    es6: true,\n    node: true,\n  },\n  extends: ['airbnb'],\n  plugins: ['react'],\n  rules: {\n     \"react/prefer-stateless-function\": 0,\n     \"react/jsx-filename-extension\": 0,\n     \"react/jsx-one-expression-per-line\": 0\n   },
\n

eslint aribnb 스타일 적용하는 것을 마쳤습니다. vscode 작업환경에서

\n

(command + shift + p ) ==> ESLINT: Fix all auto-fixable Problems

\n

\"스크린샷

\n

위와 같이 수행하면, 쉽게 문제를 해결할 수 있다.

\n
\n

참조: https://velog.io/@velopert/eslint-and-prettier-in-react

\n
","frontmatter":{"title":"ESLINT-airbnb 코드스타일 적용하기","date":"February 01, 2019"}}},"pageContext":{"slug":"/development/ESLINT-airbnb-코드스타일-적용하기/","previous":{"fields":{"slug":"/development/hello/"},"frontmatter":{"title":"Welcome Bee starter","category":"development","draft":false}},"next":{"fields":{"slug":"/development/React-Native-환경-설정하기/"},"frontmatter":{"title":"React-Native 환경 설정하기","category":"development","draft":false}}}},"staticQueryHashes":["3128451518","96099027"]}