FE Next.js (JS)

1npm install -D \
2  eslint prettier stylelint \
3  eslint-config-prettier eslint-plugin-prettier \
4  eslint-plugin-react eslint-plugin-react-hooks \
5  stylelint-config-standard stylelint-config-prettier \
6  jest \
7  @testing-library/react @testing-library/jest-dom \
8  @testing-library/user-event \
9  husky lint-staged \
10  @commitlint/config-conventional @commitlint/cli \
11  semantic-release @semantic-release/changelog @semantic-release/git \
12  @semantic-release/github @semantic-release/commit-analyzer \
13  @semantic-release/release-notes-generator \
14  identity-obj-proxy

1module.exports = {
2  root: true,
3  parserOptions: {
4    ecmaVersion: 'latest',
5    sourceType: 'module',
6    ecmaFeatures: { jsx: true },
7  },
8  env: {
9    browser: true,
10    es2021: true,
11    jest: true,
12    node: true,
13  },
14  plugins: ['react', 'react-hooks', 'import', 'prettier'],
15  extends: [
16    'eslint:recommended',
17    'plugin:react/recommended',
18    'plugin:react-hooks/recommended',
19    'plugin:import/recommended',
20    'plugin:prettier/recommended',
21  ],
22  settings: {
23    react: { version: 'detect' },
24  },
25  rules: {
26    'prettier/prettier': 'error',
27    'react/react-in-jsx-scope': 'off',
28    'import/order': [
29      'warn',
30      {
31        groups: [['builtin', 'external'], 'internal', ['parent', 'sibling']],
32        'newlines-between': 'always',
33      },
34    ],
35  },
36};

1{
2  "compilerOptions": {
3    "paths": {
4      "@/*": ["./*"]
5    }
6  }
7}

1{
2  "singleQuote": true,
3  "trailingComma": "all",
4  "printWidth": 100,
5  "tabWidth": 2,
6  "semi": true
7}

1module.exports = {
2  extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
3  rules: {
4    'at-rule-no-unknown': [
5      true,
6      {
7        ignoreAtRules: ['tailwind', 'apply', 'variants', 'responsive', 'screen'],
8      },
9    ],
10    'no-descending-specificity': null,
11  },
12};

1{
2  "scripts": {
3    "prepare": "husky install"
4  },
5  "lint-staged": {
6    "*.{js,jsx}": [
7      "eslint --fix",
8      "prettier --write"
9    ],
10    "*.{css,scss}": [
11      "stylelint --fix",
12      "prettier --write"
13    ],
14    "*.{json,md,yml}": ["prettier --write"]
15  }
16}

1npx husky install
2npx husky add .husky/pre-commit "npx lint-staged"
3npx husky add .husky/commit-msg "npx --no -- commitlint --edit \"$1\""

1module.exports = {
2  testEnvironment: 'jsdom',
3  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
4  moduleNameMapper: {
5    '^@/(.*)$': '<rootDir>/src/$1',
6    '\.(css|scss)$': 'identity-obj-proxy',
7  },
8  testPathIgnorePatterns: ['/node_modules/', '/.next/']
9};

import '@testing-library/jest-dom';

1module.exports = {
2  branches: ['main'],
3  plugins: [
4    '@semantic-release/commit-analyzer',
5    '@semantic-release/release-notes-generator',
6    [
7      '@semantic-release/changelog',
8      {
9        changelogFile: 'CHANGELOG.md',
10        changelogTitle: '# Changelog',
11      },
12    ],
13    [
14      '@semantic-release/git',
15      {
16        assets: ['CHANGELOG.md', 'package.json', 'package-lock.json'],
17        message: 'chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}',
18      },
19    ],
20    '@semantic-release/github',
21  ],
22};

1{
2  "scripts": {
3    "lint": "eslint . --ext .js,.jsx",
4    "format": "prettier --write \"**/*.{js,jsx,json,css,scss,md}\"",
5    "stylelint": "stylelint \"**/*.{css,scss,js,jsx}\" --cache",
6    "test": "jest",
7    "test:watch": "jest --watch",
8    "test:coverage": "jest --coverage",
9    "release": "semantic-release"
10  }
11}

1{
2  "editor.formatOnSave": true,
3  "editor.codeActionsOnSave": {
4    "source.fixAll.eslint": true
5  },
6  "eslint.validate": ["javascript", "javascriptreact"],
7  "prettier.enable": true
8}