Để code Front-end mượt hơn

Trong lúc làm dự án ắt hẳn bạn cũng đã từng có những lăn tăn về làm sao để code có thể dể nhìn và dễ đọc. Và một điều quan trọng nữa là phải đúng chuẩn mọi người hay làm.

Ở bài này mình xin hướng dẫn các bạn cách setup config các Extendsion trong VS Code để các bạn có thể dễ dàng trình bày Code mình cho nó sạch sẽ gọn gàng hơn nhé.

Các Pluggin cần thiết

• Prettier – Code formatter
• ESLint
• Vue laguage features (Ở đây bạn có thể thay thế bằng React hoặc Angular….)

Cách config

1. Prettier

Prettier là một công cụ để format code tự động. Nó cho phép bạn thống nhất phong cách code chung của cả nhóm để có thể cho ra những đoạn code đẹp, ngay hàng thẳng lối và dễ đọc hơn. 

// .pretierrc.js
module.exports = {
  trailingComma: 'es5',
  tabWidth: 2,
  semi: false,
  singleQuote: true,
  endOfLine: 'auto',
}

Tham khảo: https://prettier.io/docs/en/configuration.html

2. ESLint

Lint là những công cụ giúp chúng ta phân tích code, từ đó đưa ra các vấn đề mà code đang gặp phải như không tuân thủ coding style, sai coding convention. Ngoài ra, lint còn có thể giúp chúng ta tìm ra một số bug tiềm ẩn trong code như gán biến chưa khai báo, có thể gây lỗi runtime hoặc lấy giá trị từ một biến toàn cục khiến cho việc debug trở nên khó khăn, v.v…

// .eslintrc.js
const prettierConfig = require('./.prettierrc.js')
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    'plugin:prettier/recommended',
  ],
  plugins: ['prettier'],
  parserOptions: {
    parser: '@babel/eslint-parser',
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'prettier/prettier': ['error', prettierConfig],
  },
}

Tham khảo https://eslint.org/docs/latest/user-guide/configuring/rules

3. VS Code editor config

Khi bạn setting global cho Visual Studio code, sẽ impact tới các project khác bạn đang làm với format khác. Thay vào đó bạn config theo từng project để khi bạn pull request về thì nó sẽ apply cho dự án hiện tại mình đang làm thôi. Rất tiện phải không nào

Bạn sẽ tạo folder .vscode ở folder gốc, sau đó tạo thêm file .settings.json để VSCode hiểu rằng bạn muốn đè một vài setting của global

// settings.json
{
    "editor.formatOnSave": true,
}

Tham khảo: https://code.visualstudio.com/docs/getstarted/settings#_when-does-it-make-sense-to-use-workspace-settings

Chúc các bạn code vui nhé.