ถ้าท่านเป็นคนที่ใช้งาน Vim เป็นและ อ ย า ก ลองใช้ Vim เป็น IDE เพื่อพัฒนา Flutter application ล่ะก็ คุณนั้นมาถูกทางแล้ว เพื่อความมันส์ในการ code และเพื่อความ lightweight ที่จะทำให้เราเปิด emulator ได้หลายจอมากขึ้น เราไปดูกันเลยว่าต้องทำอะไรบ้าง
1. ลง Dart SDK
ก่อนอื่นจะต้องติดตั้ง Dart ก่อน (หรือไปแก้ path ให้ชี้ไปที่ Dart ของ Flutter) เพื่อใช้งาน Syntax highlighting, Support .dart filetype และอื่นๆ
$ brew tap dart-lang/dart // ใช้ Homebrew
$ brew install dart---------------------------$ sudo apt-get update // ใช้ apt-get
$ sudo apt-get install apt-transport-https$ sudo sh -c 'wget -qO- https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -'$ sudo sh -c 'wget -qO- https://storage.googleapis.com/download.dartlang.org/linux/debian/dart_stable.list > /etc/apt/sources.list.d/dart_stable.list'$ sudo apt-get update
$ sudo apt-get install dart
หลังจากนั้นให้เพิ่ม Dart ลง PATH
2. ลง Vim Plugin
2.1 Dart lang support
เพื่อจะให้ vim นั้นอ่านไฟล์ .dart ได้, มี syntax highlighting และ indentation ที่ถูกต้อง เราจะต้องลง dart-vim-plugin ใน vim เสียก่อน
หากเราใช้งาน Vundle หรือ Vim-Plug อยู่แล้ว วิธีการก็แค่เพิ่มลงไปใน .vimrc เท่านั้นเอง
Plugin 'dart-lang/dart-vim-plugin' //Vundle
Plug 'dart-lang/dart-vim-plugin' //Vim-Plugหลังจากเพิ่ม dart-vim-plugin ลงใน vim แล้ว vim ของเราก็จะมีสีสันขึ้นมาทันตาเห็นครับผม
นอกจากนี้เรายังสามารถใช้คำสั่ง :DartFmt เพื่อ format code ของเราได้ด้วย และ config อย่างอื่นได้จาก
let g:dart_style_guide = 2 //Indent space
let g:dart_format_on_save = 1 //Format on save
...2.2 Auto Complete, Lint, Code Actions
Coc and Coc-Flutter
ในส่วนของ Intellisense engine ที่แนะนำก็จะเป็น Coc และ Coc-Flutter เนื่องจากสามารถลง Plugin เสริมได้เยอะและค่อนข้าง Configurable
ก่อนอื่นก็ติดตั้ง Coc ใน vim
Plugin 'neoclide/coc.nvim' //Vundle
Plug 'neoclide/coc.nvim', {'branch': 'release'} //Vim-Plugหลังจากลง Coc แล้ว เราก็ต้องติดตั้งส่วนเสริม Coc-Flutter โดยใช้คำสั่ง
:CocInstall coc-flutterเท่านี้เราก็ได้ฟังก์ชั่นต่างๆที่ใช้ได้ใน VSCode อาธิเช่น Lint when type, snippets, auto complete, etc. มาใช้ใน vim แล้ว 🎉
- แต่ว่า snippets ที่มีไม่ใช้อาจจะมีไม่ครบเท่าใน VSCode ในส่วนนี้เราต้องใช้ Coc-Snippets และเพิ่ม snippets ที่ขาดหายไปเอง (เช่น statefull/less builder)
และหากต้องการใช้ Code Actions/ Refractor ก็สามารถใช้ Code Action ของ Coc ได้เลย
ก่อนอื่นต้องไป map code action key ใน config ของเราก่อน
nmap <silent> <leader>aa <Plug>(coc-codeaction-selected)หลังจากนั้นก็กด key ที่เรา map ไว้แล้วกด enter
เราก็จะได้ Code Actions มาใช้สมใจอยากเป็นทีเรียบร้อย
และยังมีความสามารถอื่นของ Coc อย่างเช่น code navigation ได้จาก อ้างอิง
" GoTo code navigation.
nmap <silent> gd <Plug>(coc-definition)
nmap <silent> gy <Plug>(coc-type-definition)
nmap <silent> gi <Plug>(coc-implementation)
nmap <silent> gr <Plug>(coc-references)อีกทั้ง Coc-Flutter ยัง support ในส่วนของ integrated flutter simulator เพื่อให้เราสามารถควบคุม simulator ภายใน vim ได้อย่างรวดเร็ว และรวมถึงความสามารถอื่นๆอีกมากมายของ Coc-Flutter รวมถึงความสามารถในการ configurable อย่างหลากหลาย อ้างอิง Coc-Flutter
นอกจากนี้ยังมี Plugin ของ vim ที่สามารถใช้งานร่วมกับ Flutter ได้อีกอย่างเช่น vim-lsc-dart และ vim-flutter
Conclusion
อย่างที่ทุกท่านเห็น การติดตั้งและ config vim ให้เป็น IDE นั้นไม่ยากอย่างที่คิด อีกทั้งยังมีความยืดหยุ่นสูง และน่าจะตอบโจทย์การใช้งานสำหรับทุกคน
สุดท้ายนี้ ขอให้ทุกท่านมี ค ว า ม สุ ข กับการใช้ vim เพื่อเป็น Flutter IDE และหวังเป็นอย่างยิ่งว่าทุกคนจะหันมาใช้ vim กันมากขึ้น แล้วไว้เจอกัน Blog หน้านะครับ
Any feedback is appreciated :)
