Intception Hideout

# สร้างโปรเจค Vue.js กับ VS Code

#Dev#Vuejs#Settings#Vscode

มาเริ่มสร้างโปรเจค Vue.js พร้อมกับตั้งค่า VS Code แบบที่คิดว่าดีกันดีกว่าโดยสิ่งที่เราจะได้นั้น

  • การ Dev แบบไม่ต้องจัดฟอร์แมตโค้ดเอง โค้ดเรียบร้อย แม้ว่าจะ Dev กันทีละหลายคน
  • โปรแกรมจะแก้โค้ดให้เอง (แต่บางกรณีมันก็ไม่แก้ให้นะ)
Header

# ติดตั้ง NPM และ Vue CLI กันก่อน

  1. สำหรับติดตั้ง Node/NPM คลิก (opens new window)
  2. ติดตั้ง Vue CLI ผ่าน Command
npm install -g @vue/cli
  1. จากนั้นก็ลองสร้างสักโปรเจคนึง
vue create sample

พอรันคำสั่งแล้วก็จะพบกับหน้าจอช่วยสร้างโปรเจค ในที่นี้ผมเคยสร้างโปรเจคมาก่อนแล้วก็ได้ทำการเซฟการตั้งค่าเอาไว้ด้วย ถ้าเราพึ่งเคยสร้างครั้งแรกอาจจะเลือก ‘Manually select features’ ก็ได้ครับ

Image

ซึ่งเมื่อเลือกแล้วจะขึ้นหน้าว่าเราต้องการให้เพิ่มอะไรเข้าไปในโปรเจคของเราบ้าง

  • Babel สำหรับ Compile Javascript ของเรา ก็เลือกไป
  • TypeScript สำหรับคนที่อยากเขียนเป็น TypeScript แทน Javascript
  • Progressive Web App ถ้าอยากใช้ก็เลือกได้ครับ เพิ่มเติม
  • Router ปลั๊กอินพื้นฐานที่ควรมี สำหรับการทำเว็บแบบ Single Page Application
  • Vuex ปลั๊กอินที่ใช้จัดการ State ของ Application ของเรา
  • CSS Pre-processors สำหรับคนที่จะใช้ภาษาอย่าง SASS, SCSS, LESS ในการเขียนแทน CSS
  • Linter / Formatter ตัวช่วยที่จะทำให้โปรเจคของเรามีระเบียบ ถ้าเขียนโค้ดหลายๆคนโปรเจคจะมีลักษณะเดียวๆกัน
  • Unit Testing สำหรับทำเทส
  • E2E Testing สำหรับทำเทสแบบเสมือนมีคนใช้จริง
Image

เมื่อเลือกเสร็จแล้วจะถึงการตั้งค่าแต่ละปลั๊กอินแบบละเอียด

Image
เริ่มกันที่ตั้งค่า Vue Router
Image
เลือกเลยว่าอยากใช้อะไรแทน CSS

การตั้งค่า Linter เลือกหนึ่งในสองอันนี้

Image
Image
เลือกว่าจะให้ Linter ทำงานตอนไหน

อันนี้เป็นการเลือกว่าจะให้พวก Config ของ Plugin ต่างๆไปอยู่ที่ไหน แบบแรกคือแยกไฟล์ออกมาเลย ส่วนแบบที่สองคือโยน Config ไว้ใน package.json

Image

สุดท้ายจะถามว่าให้บันทึกการตั้งค่าแบบนี้ไว้ใช้ทีหลังไหม ก็แล้วแต่เลยครับ

Image

ตั้งค่าเสร็จแล้วก็รอไปยาวๆ หลังจากเสร็จแล้วให้ไปที่โฟลเดอร์ของโปรเจคแล้วทำการติดตั้ง

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

# ติดตั้ง VSCode และ Extension

  1. ถ้ายังไม่มี VSCode ก่อนครับ คลิก (opens new window)
  2. ทำการเปิดโปรแกรมขึ้นมาไปที่เมนู Extension ด้านซ้าย ค้นหา ‘vue extension pack’ แล้วเลือก ‘Vue.js Extension Pack’ ของ ‘Muhammad Ubaid Raza’ แล้วทำการติดตั้ง
Image
Vue.js Extension Pack

ทีนี้ไปที่เฟืองซ้ายล่างแล้วเลือก Settings -> Workspace Settings แล้วกดด้านไอค่อนขวาบนสุดที่เป็นรูป {} แล้วทำการแปะ Settings ลงไป

{
  "editor.insertSpaces": true,
  "editor.tabSize": 2,
  "eslint.validate": [
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "javascriptreact",
      "autoFix": true
    }
  ],
  "eslint.autoFixOnSave": true,
  "vetur.validation.template": false,
  "[scss]": {
    "editor.formatOnSave": true
  },
  "[json]": {
    "editor.formatOnSave": true
  },
  "[jsonc]": {
    "editor.formatOnSave": true
  },
  "vetur.completion.tagCasing": "initial",
  "path-intellisense.extensionOnImport": true,
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
  }
}

ทำการเพิ่มไฟล์ .prettierrc ที่นอกสุดของโฟลเดอร์โดยมีเนื้อหา

{
  "singleQuote": true,
  "semi": true  // true ถ้าอยากให้โค้ดเราใส่ ; ลงท้าย และ false ถ้าไม่อยาก
}

แก้ไฟล์ .eslintrc.js ในอนาคตอาจเปลี่ยนเยอะ เพิ่มเท่าที่ใช้ก็ได้









 
 
 




 




 


module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    '@vue/airbnb',
    'plugin:prettier/recommended',   // Add this
    'prettier',   // Add this
    'prettier/vue',   // Add this
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'semi': 'off',   // Add this
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
  plugins: ['prettier']   // Add this
};

ปิด VS Code แล้วเปิดใหม่เสียหนึ่งที ก็พร้อมที่จะทำงานแล้วจ้า 🤣

อัปเดตเมื่อ: 1 ปีที่แล้ว