Gunakan Config ESLint Berikut Agar Codingan Menjadi Rapi

Pada artikel kali ini saya akan bagikan Config ESLint Yang Saya Biasa Gunakan. ESLint sangat bermanfaat agar code style dalam suatu project tetap seragam dengan aturan-aturan yang telah ditetapkan.

Setup Project

Kali ini saya akan membuat project React dengan menggunakan yarn dan vite.

yarn create vite

Bisa diisi sesuai dengan yang diinginkan, misalnya:

• Name: my-eslint-config.
• Framework: React.
• Variant: TypeScript.

Di sini saya akan mencontohkan yang variant TypeScript, tapi ini juga berjalan pada variant JavaScript.

Install Dependencies

Ada beberapa dependencies yang akan diinstall:

yarn add -D eslint prettier typescript eslint-config-prettier eslint-plugin-import eslint-plugin-prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin

Setup Module Aliases

Agar terhindar dari import yang seperti berikut:

import ExampleComponent from '../../../../components/Example.component';

Kita bisa memanfaatkan module aliases agar import bisa menjadi lebih rapi, contohnya seperti berikut:

import ExampleComponent from '@components/Example.component';

Kita akan coba membuat dan mengubah beberapa file untuk bisa mencontohkan module alises.

src/components/Example.component.tsx

const ExampleComponent = () => {
  return <div>Example Component</div>;
};

export default ExampleComponent;

src/utils/Example.util.ts

export const example = () => {
  console.log('example');
};

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": [
      "DOM",
      "DOM.Iterable",
      "ESNext"
    ],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@components/*": [
        "src/components/*"
      ],
      "@utils/*": [
        "src/utils/*"
      ]
    }
  },
  "include": [
    "src"
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

vite.config.ts

import path from 'path';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@components': path.resolve(__dirname, './src/components'),
      '@utils': path.resolve(__dirname, './src/utils'),
    },
  },
});

Kalau menggunakan JavaScript maka file yang di ubah adalah jsconfig.json dan vite.config.js.

Setup Prettier

Buat 1 file di root project dengan nama .prettierrc.cjs.

.prettierrc.cjs

module.exports = {
  bracketSpacing: true,
  jsxBracketSameLine: true,
  singleQuote: true,
  trailingComma: 'all',
};

Untuk lebih lengkapnya, bisa di pelajari pada Prettier.

Setup ESLint

Buat 1 file di root project dengan nama .eslintrc.cjs.

.eslintrc.cjs

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint', 'import', 'prettier'],
  extends: ['eslint-config-prettier', 'plugin:prettier/recommended'],
  rules: {
    'import/order': [
      'error',
      {
        groups: ['builtin', 'external', 'internal'],
        pathGroups: [
          {
            pattern: 'react',
            group: 'external',
            position: 'before',
          },
        ],
        pathGroupsExcludedImportTypes: ['react'],
        'newlines-between': 'never',
        alphabetize: {
          order: 'asc',
          caseInsensitive: true,
        },
      },
    ],
    'sort-imports': [
      'error',
      { ignoreMemberSort: false, ignoreDeclarationSort: true },
    ],
  },
  settings: {
    'import/internal-regex': '^@components|^@utils',
  },
};

Kalau tidak menggunakan React maka config react bisa dihapus saja.

Autofix VSCode

Install extension ESLint pada VSCode dengan cara berikut:

• Buka Extensions di sidebar VSCode.
• Cari eslint.
• Install ESLint yang publishernya Microsoft.

Kemudian buat 1 folder yang bernama .vscode pada root project dan di dalamnya tambah 1 file berikut.

.vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Demo

Kita akan coba mengacak-acak code pada src/App.tsx seperti berikut:

Setelah kita tekan CTRL + S (Windows) atau Cmd + S (Mac).

Maka code kita akan disesuaikan dengan rules yang ditentukan pada ESLint sehingga akan rapi kembali. Ini sangat berguna dan akan membuat kita semakin produktif dalam development karena autofix akan berjalan ketika kita melakukan save file.

Penutup

Untuk contoh codenya bisa dilihat pada GitHub Repository My Eslint Config.

Terimakasih sudah membaca artikel Gunakan Config ESLint Berikut Agar Codingan Menjadi Rapi. Semoga artikel ini bisa bermanfaat bagi teman-teman.