Format source code và bắt lỗi

Tổng quan ​

Thông thường, khi viết mã nguồn, chúng ta thường gặp phải các vấn đề như format source code, bắt lỗi, ... Để giúp chúng ta giải quyết các vấn đề này, có rất nhiều công cụ hỗ trợ như ESLint, Prettier, ... Ngoài ra chúng ta cũng có thể sử dụng các phím tắt + plugin trong Visual Studio Code để format source code và bắt lỗi.

Format source code ​

Để format source code trong Visual Studio Code, đầu tiên chúng ta cần tạo file .prettierrc với nội dung sau:

{
	"bracketSpacing": true,
	"bracketSameLine": true,
	"jsxBracketSameLine": true,
	"singleAttributePerLine": true,
	"tabWidth": 4,
	"useTabs": true,
	"proseWrap": "always",
	"printWidth": 1000,
	"endOfLine": "auto"
}

Sau đó cài đặt prettier bằng lệnh sau:

npm install -D prettier

hoặc

yarn add prettier

Tạo thư mục với tên .vscode trong thư mục gốc của dự án, tiếp tục tạo file settings.json với nội dung sau:

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true,
    "editor.formatOnType": true,
    "editor.wordWrap": "on",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "editor.tabSize": 4,
    "editor.detectIndentation": true,
}

Vào file package.json và thêm script sau:

"scripts": {
    "format": "prettier 'src/**/*.{ts,json,tsx,css,js,scss,yaml}' --write",
}

Đoạn mã trên sẽ format tất cả các file có đuôi là .ts, .json, .tsx, .css, .js, .scss, .yaml trong thư mục src.

Cuối cùng, chạy lệnh sau để format source code:

npm run format

Bắt lỗi ​

Để bắt lỗi trong Visual Studio Code, chúng ta cần cài đặt ESLint bằng lệnh sau:

npm install -D eslint

Tuỳ theo dự án mà chúng ta cấu hình ESLint cho phù hợp. Quý vị có thể sử dụng ESLint với các cấu hình mặc định hoặc tùy chỉnh cấu hình theo ý muốn. Việc cấu hình ESLint sẽ không được đề cập ở đây.

Sau khi cấu hình xong, chúng ta có thể chạy lệnh sau để bắt lỗi:

npx eslint ./src --fix