다음 단계를 시작합니다.js-VScode, ESLint 및 Prettier

다음 단계를 시작합니다.js


"Next.js는 생산에 필요한 모든 기능을 혼합하여 서버 렌더링, TypeScript 지원, 스마트 바인딩, 라우팅 프리페치 등을 사용할 수 있는 최상의 개발 경험을 제공합니다. 구성할 필요가 없습니다."-Next.js home page에서 말한 바와 같다.
Next를 사용하는 이유는 무엇입니까?js?
  • Image Optimisation
  • Internationalisation
  • Next.js Analytics
  • Zero Config
  • Hybrid: SSG and SSR
  • Incremental Static Regeneration
  • TypeScript Support
  • Fast Refresh
  • File-System Routing
  • API Routes
  • Built-in CSS Support
  • Code-Splitting and Bundling
  • 이제 시작이야.js


    주의: 저희는 Visual Studio Code를 코드 편집기로 사용하지만, 코드를 작성할 때 가장 익숙한 코드 편집기를 마음대로 사용할 수 있습니다.
    우선 몇 가지 사전 요구 사항을 설치해야 합니다.
  • Node.js

  • yarn - 패키지 관리자
  • 또한 npm를 패키지 관리자로 사용할 수도 있습니다.이 지침에서 우리는 실을 사용할 것이다.
    그리고 우리는 아래의 새로운 명령을 집행한다.js 응용 프로그램.
    # Replace $PROJECT with your project name
    yarn create next-app $PROJECT
    # Or using the TypeScript flag for a TypeScript project
    yarn create next-app --typescript $PROJECTNAME
    
    마지막 명령은 기본 항목을 만듭니다.새로 만든 프로젝트에서 package.json 라는 파일을 찾을 수 있습니다.이 파일에는 다음과 같은 항목과 관련된 메타데이터 정보가 포함됩니다.스크립트, 버전, 의존 항목.
    {
        "name": "$PROJECT",
        "version": "0.1.0",
        "private": true,
        "scripts": {
            "dev": "next dev", 
            "build": "next build",
            "start": "next start"
        },
        "dependencies": {
            "next": "10.2.3",
            "react": "17.0.2",
            "react-dom": "17.0.2"
        }
    }
    
    스크립트 섹션은 Thread를 사용하여 수행할 때 다음과 같은 세 가지 다른 스크립트로 구성됩니다.
  • yarn dev: 로컬에서 어플리케이션 실행
  • yarn build: 생산성
  • 을 위한 어플리케이션 구축
  • yarn start: 어플리케이션 시작
  • 의 운영 버전

    ESLint 안감 사용


    우리는 ESLint 를 짧은 벨벳으로 사용할 것이다.이 도구를 사용하는 주요 이유는 다음과 같습니다.
  • 오류를 포착하는 데 도움을 줍니다
  • 일관된 스타일로 코드를 작성하는 데 도움을 줍니다
  • VScode에 ESLint extenstion 설치


    extensions 탭으로 이동하거나 Ctrl+Shift+X를 사용하여 ESLint를 입력하고 설치를 클릭합니다.

    ESLint 설정


    ESLint를 설정하려면 다음 명령을 실행합니다(프로젝트의 루트에 있는지 확인).
    # This will add eslint as a dev dependency. 
    # If open package.json you will see this new dev dependency added 
    # to the project (once executed). 
    yarn add eslint --dev
    
    다음 단계는 우리 라인을 설정하는 것입니다.ESLint에 대한 새 구성 파일을 생성하려면 다음 명령을 실행해야 합니다.
    yarn run eslint --init
    
    마지막 명령을 실행하면 질문 세트가 표시됩니다.설정에서 다음 옵션을 선택했습니다.

  • ESLint는 어떻게 사용하시겠습니까?문법 검사, 문제 발견 및 코드 스타일 강제 실행

  • 당신의 프로젝트는 어떤 유형의 모듈을 사용합니까?Javascript 모듈(가져오기/내보내기)

  • 당신의 프로젝트는 어떤 프레임워크를 사용합니까?리액션

  • 프로젝트에 TypeScript를 사용하십니까?아니오.

  • 당신의 코드는 어디에서 실행됩니까?브라우저

  • 당신은 당신의 프로젝트 스타일을 어떻게 정의하고 싶습니까?유행 스타일 가이드 사용

  • 당신은 어떤 스타일의 지침을 따르고 싶습니까?Airbnb(이 안내서에서 우리는 이런 스타일을 사용한다. 왜냐하면 이것은 우리 개인의 취향이기 때문이다)

  • 어떤 형식의 프로파일을 원하십니까?JSON
  • 종속성 설치를 묻는 메시지가 나타나면 [예]를 선택합니다.
  • 모든 질문에 답하면 .eslintrc.json라는 새 파일이 생성됩니다.이 파일은 우리 린터의 설정을 저장합니다.ESLint에서 무시해야 할 파일도 지정할 수 있습니다.이것은 creating a .eslintignore file를 통해 완성할 수 있다.프로젝트에서는 일반적으로 다음 디렉토리를 무시합니다.
    # .estlintignore file
    .next
    dist
    node_modules/
    
    자세한 내용은 Airbnb JavaScript styling guideESLint configuration docs를 참조하십시오.
    잘했어. 에어비앤비의 자바스크립트 스타일 매뉴얼을 사용해서 새로 만든 Next에 ESLint를 설정했어.js 프로젝트.너는 또 다른 유행하는 스타일링 매뉴얼을 사용할 수 있다. 예를 들어Google,Standard, 심지어 자신의 취향에 따라 자신의 스타일링을 만들 수 있다.

    Prettier를 사용하여 형식 설정하기


    우리는 Prettier를 코드 포맷 프로그램으로 사용할 것이다.코드 포맷 프로그램을 사용하는 주요 원인은 전체 코드 라이브러리에서 일치성을 유지하는 데 도움을 주기 때문이다.

    VScode에 더 예쁜 확장 기능 설치


    extensions 탭으로 이동하거나 Ctrl+Shift+X를 사용하여'Prettier'를 입력하고 설치를 클릭합니다.

    파일을 저장할 때 VScode의 사용자 설정"editor.formatOnSave": true에서 자동 포맷 코드(Ctrl+Shift+P->설정 열기(JSON)->설정 붙여넣기)를 설정해야 합니다.

    더 예쁜 걸로 해주세요.


    prettier를 응용 프로그램에 설치하려면 다음 명령을 실행해야 합니다.
    yarn add --dev --exact prettier
    
    다음은 prettier에 .prettierrc.json 라는 빈 프로필을 만드는 것입니다.다음은 주로 응용 프로그램에 사용되는 기본 설정입니다. 그러나 마음대로 사용하십시오. set up your own rules
    {
        "singleQuote": true, # Use single quotes instead of double quotes
        "tabWidth": 2,       # Number of spaces per indentation level
        "semi": true         # Print semicolons
    }
    
    현재, 더 예쁜 설정이 ESLint와 충돌할 수 있기 때문에, 충돌 규칙을 닫아야 합니다.이 작업은 adding eslint-config-prettier 를 통해 쉽게 수행할 수 있습니다.
    yarn add --dev eslint-config-prettier
    
    그리고 "prettier".eslintrc.json 파일의 '확장' 그룹에 추가합니다.마지막으로 두면 다른 설정을 덮어쓸 수 있습니다.그런 다음 파일은 다음과 같습니다.
    {
        "env": {
            "browser": true,
            "es2021": true
        },
        "extends": ["plugin:react/recommended", "airbnb", "prettier"],
        "parserOptions": {
            "ecmaFeatures": {
                "jsx": true
            },
            "ecmaVersion": 12,
            "sourceType": "module"
        },
        "plugins": ["react"],
        "rules": {}
    }
    
    ESLint를 구성할 때의 이전 단계와 유사하게 우리는 ignore files from being “prettified” in our app를 원할 수 있습니다.이를 위해 .prettierignore라는 새 파일을 만듭니다.
    일반적으로 권장 사항.prettierignore.gitignore.eslintignore에 기반합니다.
    잘했어, 새로 만든 넥스트를 더 예쁘게 설정하는 데 성공했어.js 프로젝트는 전체 코드 라이브러리에서 일치성을 유지하는 데 도움을 줍니다.

    결론


    Airbnb 스타일 가이드를 사용하는 경우 create-next-app 명령을 실행할 때 작성된 일부 JavaScript 파일이 잘못 강조 표시될 수 있습니다.이 명령이 생성한 코드가 에어비앤비의 스타일 가이드 약정에 맞지 않기 때문이다.그러면 우리는 어떻게 이런 오류를 복구합니까?

  • 아이템 전파 금지react/jsx-props-no-spreading
    구성 요소가 어떤 도구를 받을지 명확하게 설명하다.

  • 확장자가 ""인 파일에서는 JSX를 사용할 수 없습니다.js'react/jsx-filename-extension
    파일을 ""에서 ""(으)로 변경합니다.js“to”.jsx'

  • JSXreact/react-in-jsx-scope를 사용할 경우 "React"는 범위 내에 있어야 합니다.
    파일에 React import 추가import React from 'react';

  • 2공백으로 축소할 것으로 예상되지만 4칸indent:
    prettier 확장자를 설정할 때 앞의 절차를 따랐다면, 이 파일을 저장하십시오. 이 파일은 자동으로 코드를 포맷합니다..prettierrc.json에서 "tabWidth:2"를 설정하면 이 문제가 해결됩니다.
  • 앞에서 말한 바와 같이 Airbnb styling guidereact specific linting rules를 참고하여 들보 출력의 오류를 더욱 잘 이해하도록 하십시오.사용자의 취향에 맞지 않거나 인코딩 기준에 맞지 않는 코드를 사용하기를 원할 수도 있습니다.
    즐거운 코딩!언제든지 피드백을 남겨주세요.

    좋은 웹페이지 즐겨찾기