Para a configuração de um projeto em Javascript ou Typescript que dê uma boa produtividade, e padrão no estilo do código, é semper interessante utilizar ferramentas que tragam facilidades no dia a dia para validar esses erros e má formatações do código. Principalmente quando estamos desenvolvendo com um time em um mesmo projeto, fazendo com que evite muita diferenciação em como o código é escrito entre os desenvolvedores.

Para isso, 존재 ferramentas poderosas como o ESlint que vai fazer toda a verificação de sintax, e o Prettier que vai padronizar todo o estilo do código.

Configurando o Typescript (Caso o projeto esteja em JS)

Abra o terminal e roda o comando para criar um arquivo chamado tsconfig.json ou você pode criá-lo diretamente pelo editor.

touch tsconfig.json

타이프스크립트를 설치하거나 명령을 실행하지 마십시오:

# with npm
npm install typescript --save-dev

# with yarn
yarn add typescript -D

configurações padrões do Typescript, basta rodar or comando로 인기 있는 파라:

tsc init

Eu ainda alterei as configurações para:

{
"compilerOptions": {
    "jsx": "react",
    "baseUrl": ".",
    "strict": false,
    "esModuleInterop": true,
    "noImplicitAny": false,
    "paths": {
        "@/*": ["resources/js/*"]
    }
},
"exclude": ["node_modules", "public"]
}

Para mais informações accesse a documentação oficial

ESLint 구성

Para instalar o eslint, você pode adicionar o pacote como dependsência de desenvolvimento rodando o comando no terminal:

npm install eslint --save-dev

# or

yarn add eslint --dev

Você vai poder inicializar o eslint no projeto rodando:

yarn run eslint --init

No terminal, irá surgir um questionário para ir fazendo a configuração, e você pode ir configurando de sua preferência. Minha escolha foi o React, e gerei o arquivo usando Javascript.

Você pode verificar como instalar na documentação oficial

Lint 없는 Adicionando 플러그인

eslint-plugin-react-hooks를 설치하거나 후크를 사용하여 검증할 수 있습니다.

Para instalar é so rodar:

# npm 
npm install eslint-plugin-react-hooks --save-dev

# yarn 
yarn add eslint-plugin-react-hooks --dev

린트 추가 구성:

{
  "extends": [
    // ...
    "plugin:react-hooks/recommended"
  ]
}

E costomizar os avisos com:

{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

Prettier com o ESlint 구성

Para instalar a extenção do prettier pro lint, é só rodar:

# with npm
npm install --save-dev eslint-plugin-prettier
npm install --save-dev --save-exact prettier
npm install --save-dev eslint-config-prettier

# with yarn 
yarn add prettier@latest eslint-plugin-prettier@latest eslint-config-prettier@latest -D

E adicione no eslintrc. estas configurações:

{
extends: [
    //...
    'prettier',
  ],
plugins: ['prettier'],
rules: {
        // ...
    'prettier/prettier': 'warn',
  },
}

Adicione o arquivo .prettierrc na raiz do projeto, e coloca as suas configurações. Você pode verificar a documentação para personalizar da forma que você achar melhor.

Meu arquivo ficou assim:

{
    "tabWidth": 2,
    "singleQuote": true,
    "semi": true,
    "trailingComma": "all",
    "parser": "flow",
    "printWidth": 120,
    "jsxSingleQuote": true,
    "jsxBracketSameLine": true,
    "arrowParens": "always",
    "endOfLine": "auto"
}

지금은 구성이 더 예쁘지 않은 것으로 정의됩니다. Você pode acessar a documentação no github para saber como.

VSCode 없이 ESLint 구성

Adicione uma 파스타.vscode na raiz do projeto caso ela não exista.
Cria um arquivo com o nome settings.json , 존재하지 않습니다.

E adicione estas configurações:

{
    "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

Isso vai forçar o ESLint formatar automaticamente semper que um arquivo for salvo.

기능 통합을 위해 VSCode에서 ESLint로 플러그인을 설치해야 합니다.

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

결론

De modo geral só foi preciso instalar estas dependsências:

"@types/jest": "^27.0.1",
"@types/node": "^16.7.10",
"@types/react": "^17.0.19",
"@types/react-dom": "^17.0.9",
"@typescript-eslint/eslint-plugin": "^4.31.0",
"@typescript-eslint/parser": "^4.31.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.25.1",
"eslint-plugin-react-hooks": "^4.2.0",
"prettier": "2.3.2",
"typescript": "^4.4.2"

아르키보.eslintrc.js :

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
    'prettier',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint', 'react-hooks', 'prettier'],
  rules: {
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',
    'react/prop-types': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    'prettier/prettier': 'warn',
  },
};

아르키보.prettierrc :

{
    "tabWidth": 2,
    "singleQuote": true,
    "semi": true,
    "trailingComma": "all",
    "parser": "flow",
    "printWidth": 120,
    "jsxSingleQuote": true,
    "jsxBracketSameLine": true,
    "arrowParens": "always",
    "endOfLine": "auto"
}

아르키보settings.json

{
    "typescript.tsdk": "node_modules/typescript/lib",
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}