Trong bài viết này chúng ta sẽ cùng nhau tìm hiểu về cách sử dụng ESlint trong ứng dụng VueJS. Nếu bạn chưa biết ESLint là gì thì hãy đọc bài viết này trước để tìm hiểu về ESLint. Bài viết này chúng ta sẽ sử dụng source code của bài viết về cách xây dựng một ứng SSR trong VueJS hoặc sử dụng webpack-simple dùng vue-cli template

Cài đặt ESLint

Vào dự án VueJS của bạn và cài đặt ESLint như sau

$ npm install eslint --save-dev

Cài đặt eslint-loader

Plugin này giúp cho Webpack nạp một vài pre-test trên các file trước khi nạp chúng

$ npm install eslint-loader --save-dev

Cấu hình kiểm tra các file .js

Được tích hợp trong loader chúng ta đã cài ở bên trên

Trong file webpack.config.js, thêm rule sau đây ở phía trước rule /\.js$/

{
  enforce: "pre",
  test: /\.js$/,
  exclude: /node_modules/,
  loader: "eslint-loader"
}

• enforce: "pre" – chỉ định rằng bạn muốn loader này chạy trước các loader thông thường.
• Đảm bảo rằng bạn sẽ loại bỏ thư mục /node_modules/ khi kiểm tra.

Chạy thử cài đặt

$ npm start hoặc npm run dev

Nó sẽ trả về một lỗi như sau:

Module build failed: Error: No ESLint configuration found.

Thêm file cấu hình

Trong thư mục gốc thêm file sau .eslintrc.js

Bạn có thể tìm hiểu thêm thông tin về file này ở đây: https://eslint.org/docs/user-guide/configuring.

Do webpack-simple template dựa trên Babel, chúng ta cũng cần cài đặt thêm phân tích cú pháp babel-eslint

npm install babel-eslint --save-dev

Thay vì tự định nghĩa và viết các rule cho dự án, chúng ta có thể sử dụng lại rule theo chuẩn chung, hoặc rule của vue

Cài đặt như sau

$ npm install --save-dev eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node eslint-plugin-vue

Thêm đoạn code sau cho file .eslintrc.js

module.exports = {
 root: true,
 parser: 'babel-eslint',
 parserOptions: {
   sourceType: 'module'
 },
 env: {
   browser: true,
 },
 extends: 'standard',
 'rules': {
   'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
 }
}

Nào hãy chạy thử lại dự án

$ npm start hoặc npm run dev

Sau khi chạy bạn sẽ thấy một loạt lỗi được đưa ra bởi ESlint hãy thử tự fix những lỗi này

✖ 40 problems (40 errors, 0 warnings)
 3 errors, 0 warnings potentially fixable with the ` --fix` option.

Như vậy chúng ta đã hoàn thành xong việc cấu hình ESLing cho các file .js

Cấu hình kiểm tra các file .vue

Về cơ bản chúng ta đã kiểm tra được hầu hết các file .js

Nhưng vẫn còn nhiều đoạn code JS cần được kiểm tra và nó được đặt trong các file .vue.  Chúng ta cần sử dụng plugin eslint-plugin-html

$ npm install --save-dev eslint-plugin-html

Để cho các thông báo khi kiểm tra các file đẹp hơn, chúng ta nên cài đặt thêm plugin sau

$ npm install --save-dev eslint-friendly-formatter

Nào hãy sửa đoạn cấu hình bên trên trong cấu hình của webpack, chúng ta thêm các file vue và sử dụng định dạng mới mà chúng ta vừa cài ở trên

{
  enforce: "pre",
  test: /\.(js|vue)$/,
  exclude: /node_modules/,
  loader: "eslint-loader",
  options: {
    formatter: require('eslint-friendly-formatter')
  }
}

Và cấu hình .eslintrc.js bao gồm html plugin và plugin:vue/recommended

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module',
    allowImportExportEverywhere: true
  },
  env: {
    browser: true,
  },
  plugins: [
    'html'
  ],
  extends: [
    'standard',
    'plugin:vue/recommended'
  ],
  rules: {
    "no-debugger": process.env.NODE_ENV === 'production' ? 2 : 0,
    "indent": ['error', 2],
    "vue/html-indent": 0,
    "vue/singleline-html-element-content-newline": 0,
    "vue/component-name-in-template-casing": 0,
    "vue/html-self-closing": 0,
    "no-tabs": 0
  }
}

Hãy thử chạy lại

$ npm start hoặc npm run dev

Bạn sẽ nhìn thấy thêm một loạt lỗi mới và hãy thử sửa nó. Mấy của tôi như sau

✘ 34 problems (34 errors, 0 warnings)

Các lỗi:

30 http://eslint.org/docs/rules/indent
3 http://eslint.org/docs/rules/space-before-function-paren
1 http://eslint.org/docs/rules/quotes

Tham khảo Github sử dụng branch vue-eslint