1. Chuẩn hóa mã nguồn

1.1. Cấu hình EditorConfig

EditorConfig giúp duy trì phong cách mã hóa thống nhất giữa các IDE khác nhau.

# http://editorconfig.org

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
max_line_length = off
trim_trailing_whitespace = false

1.2. Sử dụng Prettier

Công cụ định dạng mã hỗ trợ đa ngôn ngữ:

• Cài đặt: npm install prettier -D
• Cấu hình file .prettierrc:

{
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false
}

1.3. Kiểm tra mã với ESLint

Giải quyết xung đột ESLint-Prettier:

npm i eslint-plugin-prettier eslint-config-prettier -D

Cấu hình mở rộng:

extends: [
  "plugin:vue/vue3-recommended",
  "plugin:prettier/recommended"
]

1.4. Git Hook với Husky

Tự động kiểm tra mã trước khi commit:

npx husky-init && npm install

Thêm script kiểm tra trong package.json:

"lint-staged": {
  "*.{js,vue,ts}": "eslint --fix"
}

1.5. Quy chuẩn Commit

Sử dụng Commitizen để chuẩn hóa thông điệp commit:

npm install commitizen -D
npx commitizen init cz-conventional-changelog

Bảng loại commit:

2. Tích hợp thư viện

2.1. Cấu hình Vue

const path = require('path')
module.exports = {
  outputDir: './build',
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', path.resolve(__dirname, 'src'))
      .set('views', '@/views')
  }
}

2.2. Vue Router

import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [
  { path: '/', redirect: '/main' },
  { path: '/main', component: () => import('../views/main.vue') }
]
export default createRouter({
  history: createWebHashHistory(),
  routes
})

2.3. Vuex Store

import { createStore } from 'vuex'
export default createStore({
  state: {
    name: 'project-name'
  }
})

2.4. Element Plus

Cấu hình theo demand:

npm install element-plus
npm install babel-plugin-import -D

Cấu hình Babel:

plugins: [[
  'import',
  { 
    libraryName: 'element-plus',
    customStyleName: (name) => `element-plus/lib/theme-chalk/${name}.css`
  }
]]

2.5. Axios

import axios from 'axios'
class ApiClient {
  constructor(baseURL) {
    this.instance = axios.create({ baseURL })
    this.setupInterceptors()
  }
  setupInterceptors() {
    this.instance.interceptors.request.use(config => {
      const token = localStorage.getItem('token')
      if (token) config.headers.Authorization = `Bearer ${token}`
      return config
    })
  }
}
export default new ApiClient('/api')