ตั้งค่า Vetur และ Visual Studio Code สำหรับการพัฒนา Vue.js

ในการใช้ Visual Studio Code พัฒนา Vue.js Application ปกติเราจะติดตั้ง Extension ยอดนิยมชื่อ vetur แต่หลังจากติดตั้ง Extension แล้วการจัดระเบียบโค้ดอาจยังไม่ถูกใจ เราสามารถตั้งค่า Visual Studio Code และ Extension vetur เพิ่มเติมได้ตามตัวอย่างในบทความนี้ครับ

เมนู Setting ของ Visual Studio Code

เลือก File > Preferences > Settings

คลิ้ก {} ที่มุมขวาบน เพื่อแสดง Settings ในแบบ JSON

ตั้งค่า Language Identifier

ปกติแล้ว Visual Studio Code สามารถจำแนกได้ว่าไฟล์ที่เปิดขึ้นมาเป็นไฟล์ชนิดใด แต่เพื่อความชัวร์เราสามารถตั้งค่าโดยใช้นามสกุลของไฟล์ได้ตามตัวอย่างการตั้งค่าด้านล่างครับ

ไฟล์ settings.json

{
    "files.associations": {
        "*.vue": "vue"
    }
}

ตั้งค่า tabSize

เนื่องจากผมชอบ tabSize ขนาด 4 ตัวอักษร ก็เลยต้องตั้งค่าตามตัวอย่างด้านล่างครับ

ไฟล์ settings.json

{
    "editor.tabSize": 4,
    "editor.detectIndentation": false
}

ตั้งค่า emmet

บางกรณี emmet จะไม่ยอมทำงานกับไฟล์ที่ไม่ใช่นามสกุล .html เราจึงสามารถตั้งค่าได้ตามตัวอย่างด้านล่างครับ

ไฟล์ settings.json

{
    "emmet.includeLanguages": {
        "vue": "html",
        "vue-html": "html"
    },
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": {}
    }
}

ตั้งค่า vetur สำหรับ HTML

หลังจากติดตั้ง Extension vetur ถ้าการจัดระเบียบโค้ด HTML ยังไม่ถูกใจ เช่น เรื่องของ tabWidth, การใช้เครื่องหมาย ' หรือ " สามารถตั้งค่าได้ตามตัวอย่างด้านล่างครับ

การตั้งค่า prettyhtml เพิ่มเติม

ไฟล์ settings.json

{
    "vetur.format.defaultFormatter.html": "prettyhtml",
    "vetur.format.defaultFormatterOptions": {
        "prettyhtml": {
            "tabWidth": 4,
            "printWidth": 120,
            "singleQuote": false
        }
    }
}

ตั้งค่า vetur สำหรับ JavaScript

การจัดระเบียบโค้ด JavaScript ส่วนตัวผมชอบการไม่ใช้ ;, การใช้ ' แทนการใช้ " และ การตั้งค่าจำนวนตัวอักษรเพื่อขึ้นบรรทัดใหม่ สามารถตั้งค่าได้ตามตัวอย่างด้านล่างครับ

การตั้งค่า prettier เพิ่มเติม

ไฟล์ settings.json

{
    "vetur.format.defaultFormatter.js": "prettier",
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "printWidth": 120,
            "semi": false,
            "singleQuote": true,
            "tabWidth": 4,
            "trailingComma": "none",
            "bracketSpacing": true,
            "jsxBracketSameLine": true,
            "arrowParens": "avoid"
        }
    }
}

Configuration ทั้งหมด

ไฟล์ settings.json

{
    "editor.detectIndentation": false,
    "emmet.includeLanguages": {
        "vue-html": "html",
        "vue": "html"
    },
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": {}
    },
    "files.associations": {
        "*.vue": "vue"
    },
    "vetur.format.defaultFormatter.html": "prettyhtml",
    "vetur.format.defaultFormatter.js": "prettier",
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "printWidth": 120,
            "semi": false,
            "singleQuote": true,
            "tabWidth": 4,
            "trailingComma": "none",
            "bracketSpacing": true,
            "jsxBracketSameLine": true,
            "arrowParens": "avoid"
        },
        "prettyhtml": {
            "tabWidth": 4,
            "printWidth": 120,
            "singleQuote": false
        }
    }
}

つづく