Vue.js : Mixed spaces and tabs (no-mixed-spaces-and-tabs)

Silahkan teman-teman bisa menjalankan perintah berikut ini di dalam project Vue.js-nya.

npm remove @vue/cli-plugin-eslint

Atau teman-teman juga bisa mengikuti step-by-step cara berikut ini.

1. Jalankan perintah berikut ini :

   npx eslint --init
   

2. kemudian ada pilihan pertanyaan How would you like to use ESLint?, silahkan pilih To check syntax only. Kemudian klik ENTER.

3. Setelah itu muncul pertanyaan lagi What type of modules does your project use?, pilih JavaScript modules (import/export). Kemudian ENTER.

4. Dan ada pertanyaan lagi Which framework does your project use?, pilih Vue.js, kemudian ENTER.

5. Muncul pertanyaan lagi Does your project use TypeScript?, silahkan pilih No dan ENTER.

6. Pertanyaan lagi, Where does your code run?, silahkan pilih Browser dan ENTER.

7. Pertanyaan terakhir What format do you want your config file to be in?. Silahkan pilih JavaScript dan ENTER.

Jika berhasil, maka kita akan mendapat 1 file baru dengan nama .eslintrc.js, kemudian buak file tersebut dan ubah kode-nya menjadi seperti berikut ini.

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": "plugin:vue/essential",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
        "no-mixed-spaces-and-tabs": 0, // disable rule
    }
};

Di atas, kita menambahkan rules baru untuk menon-aktifkan mixed spaces and tabs. Silahkan restart project Vue.js kita dengan menekan tombol CTRL + C, kemudian jalankan lagi.