ainochi-kor / milli-rock

react 18.2 / next 13.4 / vanilla-extract 2.3 / typescript: 5.2 / turbo: 1.10

국락부

• 공공 데이터의 국방부 Open API를 활용하여 국군의 혜택을 모아보는 모바일 웹앱입니다.

기술 스택

• node v18.16.0
• react 18.2
• react-dom 18.2
• next 13.4
• vanilla-extract 2.3
• typescript: 5.2
• turbo: 1.10

구조도

Page 구상도

issue

• vercel style guide
• .eslintrc.cjs를 써야하는 이유

link

• Figma
• 군락부

후기

turborepo와 ve(vanilla-extract), typescript 5.2를 사용해보고 싶어서 간단하게 만들어보았습니다.
최근에 turborepo에 새로운 기능들이 추가되고, 이번에 터보레포에서 @vercel/style-guide를 기본으로 지원해주는 바람에 한번 사용해보았는데, 생각보다 유용한 린팅 시스템이어서 만족하였습니다.

milli-rock's Issues

.eslintrc.cjs를 써야하는 이유

https://eslint.org/docs/latest/use/configure/configuration-files#configuration-file-formats

• JavaScript - .eslintrc.js를 사용하고 구성을 포함하는 객체를 내보냅니다.
• JavaScript (ESM) - ESLint를 "type":"module"이라고 명시된 package.json의 JavaScript 패키지에서 실행할 때 .eslintrc.cjs를 사용합니다. 현재 ESLint는 ESM 구성을 지원하지 않습니다.
• YAML - 구성 구조를 정의하기 위해 .eslintrc.yaml 또는 .eslintrc.yml을 사용합니다.
• JSON - 구성 구조를 정의하기 위해 .eslintrc.json을 사용합니다. ESLint의 JSON 파일은 JavaScript 스타일의 주석도 허용합니다.
  package.json - package.json 파일에 eslintConfig 속성을 생성하고 해당 위치에서 구성을 정의합니다.

---

ESLint는 ESM 스타일의 JavaScript 패키지에서 실행될 때 .eslintrc.cjs 설정 파일을 사용해야 한다. ESlint는 아직 ESM을 지원하지 않기 때문에, ESM 관련 파일들은 CommonJs 모듈 시스템으로 작성된 파일을 사용해야 한다.

vercel style guide

버셀 스타일 가이드에서 어떤 것을 쓰는지 node_modules 안에 내용을 풀어서 한 눈에 보고자 정리해보았습니다.
next.js 는 next/babel을 사용하고 있어서 삭제하였습니다.

  "@vercel/style-guide/eslint/node",
  "@vercel/style-guide/eslint/typescript",
  "@vercel/style-guide/eslint/browser",
  "@vercel/style-guide/eslint/react",
  "eslint-config-turbo",

eslint-config-turbo

module.exports = {
  extends: ["plugin:turbo/recommended"],
};

node.js

module.exports = {
  extends: require.resolve('./_base'),
  env: {
    node: true,
  },
};

typeScript

const { TYPESCRIPT_FILES } = require('./constants');
const requirePackage = require('./utils/require-package');

requirePackage('typescript', 'typescript');

module.exports = {
  overrides: [
    {
      files: TYPESCRIPT_FILES,
      extends: [
        'plugin:@typescript-eslint/recommended',
        'plugin:@typescript-eslint/recommended-type-checked',
        'plugin:@typescript-eslint/strict',
        'plugin:@typescript-eslint/strict-type-checked',
        'plugin:@typescript-eslint/stylistic',
        'plugin:@typescript-eslint/stylistic-type-checked',
        'plugin:import/typescript',
        'prettier',
        require.resolve('./rules/typescript'),
        require.resolve('./rules/typescript/extension'),
        require.resolve('./rules/typescript/import'),
        require.resolve('./rules/typescript/strict'),
        require.resolve('./rules/tsdoc'),
      ],
    },
  ],
};

browser

module.exports = {
  extends: require.resolve('./_base'),
  env: {
    browser: true,
  },
};

react

module.exports = {
  extends: [
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:jsx-a11y/recommended',
    'plugin:import/react',
    'prettier',
    require.resolve('./rules/react'),
    require.resolve('./rules/jsx-a11y'),
  ],
  settings: {
    react: {
      version: 'detect',
    },
  },
};

_base

const { ECMA_VERSION, JAVASCRIPT_FILES } = require('./constants');

// See: https://github.com/eslint/eslint/issues/3458
require('@rushstack/eslint-patch/modern-module-resolution');

/**
 * This is the base for both our browser and Node ESLint config files.
 */
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:import/recommended',
    'prettier',
    require.resolve('./rules/best-practice'),
    require.resolve('./rules/comments'),
    require.resolve('./rules/es6'),
    require.resolve('./rules/import'),
    require.resolve('./rules/possible-errors'),
    require.resolve('./rules/stylistic'),
    require.resolve('./rules/unicorn'),
    require.resolve('./rules/variables'),
  ],
  env: {
    [`es${ECMA_VERSION}`]: true,
  },
  // Report unused `eslint-disable` comments.
  reportUnusedDisableDirectives: true,
  // Tell ESLint not to ignore dot-files, which are ignored by default.
  ignorePatterns: ['!.*.js'],
  // Global settings used by all overrides.
  settings: {
    // Use the Node resolver by default.
    'import/resolver': { node: {} },
  },
  // Global parser options.
  parserOptions: {
    ecmaVersion: ECMA_VERSION,
    sourceType: 'module',
  },
  overrides: [
    {
      files: JAVASCRIPT_FILES,
      parser: '@babel/eslint-parser',
      parserOptions: {
        requireConfigFile: false,
      },
    },
  ],
};