Sublime text ဟာ အရမ္းအသံုးမ်ားတဲ႔ code editor တစ္ခုျဖစ္ပါတယ္။ programming language ေတာ္ေတာ္မ်ားမ်ားကို support ေပးထားပါတယ္။
Sublime text 3 download link : https://www.sublimetext.com/3
အခုေရးမွာကေတာ႔ sublime text မွာ ဒါေတြသိထားရင္ ပိုမို ျမန္ျမန္ဆန္ဆန္ အလုပ္ျပီးႏိုင္မွာျဖစ္ပါတယ္။
1. text selection
(a) word တစ္ခုကို selection ျပဳလုပ္ျခင္း
word တစ္ခုကို အလြယ္တကူ selection လုပ္ခ်င္ရင္ အဲဒီ စာလံုးေပၚကေန double click
ႏွိပ္ေပးလိုက္ျခင္းအားျဖင့္ selection ကိုရရွိႏိုင္ပါတယ္။
(b) text line တစ္ခုကို selection ျပဳလုပ္ျခင္း
text line တစ္ခုကို selection ျပဳလုပ္မယ္ဆိုရင္ အဲဒီ text line ေပၚမွာ triple click
ႏိွပ္ေပးျခင္းအားျဖင့္ selection ကိုရရွိႏို္င္ပါတယ္။ ပိုလြယ္တာက အဲဒီ line ၇ဲ႕ ဘယ္ဘက္က
စာေၾကာင္းေရ နံပါတ္ေပၚမွာ click တစ္ခ်က္ႏွိပ္လိုက္ရင္ရပါျပီ။ ကိုယ္လိုခ်င္တဲ႔ line ေတြကို
selection လုပ္မယ္ဆိုလည္း ဘယ္ဘက္ေထာင့္ကေန ဖိျပီးဆြဲလိုက္ရံုနဲ႔ selection
ကိုရရွိႏိုင္ပါတယ္။
(c) text အားလံုးကို selection ျပဳလုပ္ျခင္း
Ctrl + a ကို ႏွိပ္လိုက္ပါ။ အားလံုး selection လုပ္ျပီးသားရပါလိမ္႔မည္။
(d) css file ေတြမွာ selector တစ္ခုအတြင္းရွိ property မ်ားကို select ျပဳလုပ္ျခင္း
ျပဳလုပ္လိုတဲ႔ property တစ္ခုခုေပၚမွာ cursor ခ်ထားျပီး Ctrl + Shit + M ကို ႏွိပ္ေပးပါ။
ဒါဆို အဲဒီ selector ၇ဲ႕ အတြန္႔ကြင္းထဲမွာရွိတဲ႔ text အားလံုးကို select လုပ္သြားပါလိမ္႔မယ္။
shortcut key အလုပ္မလုပ္ရင္ menu ထဲက selection ထဲက Expend selection to
brackets ကိုႏွိပ္လိုက္ပါ။တကယ္က အတြန္႔ကြင္း၊ ေလးေထာင့္ကြင္း၊ လက္သဲကြင္း ေတြရဲ႔
အတြင္းထဲက စာသားကို select လုပ္ေပးထားျဖစ္ပါတယ္။
(e) one line copy and paste
အခု cursor ခ်ထားတဲ႔ line ကို copy ပြားတဲ႔နည္းကို ျပပါမယ္။ ကိုယ္ပြားခ်င္တဲ႔ line မွာ cursor
ရွိေနရပါမယ္။ အဲဒီေနာက္ Ctrl + Shift + D ကို ႏွိပ္လိုက္ပါ။ ကပ္လ်က္ အသစ္ line တစ္ခု
ပြားလာပါလိမ္႔မယ္။ ဒီနည္းမွာက key သံုးခု ျပိဳင္ ႏွိပ္ရေတာ႔ လက္က အသားမက်တာျဖစ္ႏိုင္ပါ
တယ္။ေနာက္တနည္းရွိပါေသးတယ္။ အဲဒါက Ctrl + C ျပီးရင္ Ctrl + V ႏွစ္ခါ ႏွိပ္ရေပမယ့္
လက္ကအသားက်ျပီးသားဆိုေတာ႔ ပိုလြယ္မယ္လို႔ထင္ပါတယ္။
(e) one line copy and paste
အခု cursor ခ်ထားတဲ႔ line ကို copy ပြားတဲ႔နည္းကို ျပပါမယ္။ ကိုယ္ပြားခ်င္တဲ႔ line မွာ cursor
ရွိေနရပါမယ္။ အဲဒီေနာက္ Ctrl + Shift + D ကို ႏွိပ္လိုက္ပါ။ ကပ္လ်က္ အသစ္ line တစ္ခု
ပြားလာပါလိမ္႔မယ္။ ဒီနည္းမွာက key သံုးခု ျပိဳင္ ႏွိပ္ရေတာ႔ လက္က အသားမက်တာျဖစ္ႏိုင္ပါ
တယ္။ေနာက္တနည္းရွိပါေသးတယ္။ အဲဒါက Ctrl + C ျပီးရင္ Ctrl + V ႏွစ္ခါ ႏွိပ္ရေပမယ့္
လက္ကအသားက်ျပီးသားဆိုေတာ႔ ပိုလြယ္မယ္လို႔ထင္ပါတယ္။
2.text search and replace
(a) လက္ရွိေရးေနတဲ႔ page မွာ phrase (သို႔) word ကိုရွာခ်င္ရင္ Ctrl + F ကို ႏွိပ္လိုက္ပါ။
(b) စာသားမ်ားရွာေဖြျပီး replace လုပ္ခ်င္ရင္ေတာ႔ Ctrl + H ကိုႏွိပ္လိုက္ပါ။
(c) folder တစ္ခုလံုးေမႊေႏွာက္ရွာခ်င္ရင္ေတာ႔ Ctrl + Shift + F ကို ႏွိပ္လိုက္ပါ။ where
လို႔ေရးထားတဲ႔ေနရာမွာ ကိုယ္ရွာခ်င္တဲ႔ file ကိုေရးေပးလို႔ရပါတယ္။ညာဘက္ေထာင့္က button
ကို ႏွိပ္ျပီး add folder ကိုေရြးျပီး ရွာခ်င္တဲ႔ folder ကိုေရြးေပးပါ။ဒါဆိုရွာလို႔ရပါျပီ။
ပိုလြယ္တဲ႔ နည္းကေတာ႔ ဘယ္ဘက္ left sidebar မွာ ကိုယ္အခုေရးေနတဲ႔ project folder
ကိုဖြင့္ထားတယ္ဆိုရင္ သံုးလို႔ရပါတယ္။အဲဒီ sidebar က ကိုယ္ရွာခ်င္တဲ႔ folder ကို right
click ႏွိပ္ျပီး Find in folder ကိုေရြးလိုက္ပါ။
(d) program ေရးရင္း error တက္လာလို႔ line နံပါတ္ ဘယ္ေလာက္မွာ error
ရွိတယ္လို႔သိရတဲ႔အခါ အဲဒီေနရာကို အျမန္သြားႏိုင္ဖို႔အတြက္ Ctrl + G ကို ႏွိပ္လိုက္ပါ။
ကိုယ္သြားခ်င္တဲ႔ line number ကိုရိုက္ထည့္ပါ။
3.left sidebar အသံုးျပဳျခင္း
sidebar ကိုအသံုးျပဳခ်င္ရင္ menu bar က View > Side Bar > Show Side Bar ကို ေရြးလိုက္ပါ။ဒါဆို ဘယ္ဘက္မွာ sidebar တစ္ခုေပၚလာပါလိမ္႔မယ္။
(a) အသံုးျပဳမည့္ project folder ကို sidebar တြင္ေဖာ္ျပ အသံုးျပဳျခင္း
sidebar တြင္ မိမိ အသံုးျပဳမည့္ project folder ေပၚေနသည့္အတြက္ project ထဲက file တစ္ခု
ကို အလြယ္တကူ ဖြင့္လို႔ရသြားပါလိမ္႔မယ္။rename လုပ္ျခင္း delete လုပ္ျခင္း စသည္တုိ႔လည္း
လုပ္လုိ႔ရပါလိမ္႔မယ္
sidebar ထဲကိုယ္႔ project folder ထည့္မလဲဆိုရင္ နည္းလမ္း ႏွစ္ခုရွိပါတယ္။ တစ္ခုက
project folder ကို drag and drop လုပ္ျပီး sidebar ထဲထည့္ေပးပါ။ ေနာက္တစ္ခုကေတာ႔
menu bar က ေန File > Open Folder ကိုေရြးခ်ယ္ျပီး ေပၚလာတဲ႔ dialog box ထဲမွာ ကိုယ္ထည့္
ခ်င္တဲ႔ folder ကိုေရြးေပးလိုက္ပါ။
4. css file ေတြ edit လုပ္ရင္ပဲျဖစ္ျဖစ္ code file ေတြ edit လုပ္ရင္ပဲျဖစ္ျဖစ္ အသံုးတည့္တဲ႔နည္းေလးကိုေဖာ္ျပေပးပါမယ္။ css file ေတြဆိုရင္ selector ေတြ အမ်ားၾကီးေရးထားတဲ႔အခါ ရွာရအလြန္ခက္သြားပါတယ္။ code file ေတြမွာဆိုရင္လည္း function ေတြ အမ်ားၾကီး ပါ၀င္ေနတဲ႔အခါ ကိုယ္ရွာခ်င္တဲ႔ function ကိုရွာရခက္ပါတယ္။function နာမည္ကို အတိအက်သိရင္ Find နဲ႔ ရွာလို႔ရေပမယ့္ မေသခ်ာတဲ႔အခါ function list ထဲမွာရွာခ်င္တာမ်ိဳး ရွိလာမွာပါ။
ဒါဆို Ctrl + R ကို ႏွိပ္လိုက္ပါ။ function list က်လာပါလိမ္႔မယ္။ ေရြးလိုက္တာနဲ႔ အဲဒီ function ရွိတဲ႔ line ကို ေရာက္သြားမွာျဖစ္ပါတယ္။အလြန္အသံုး၀င္ပါတယ္။
5.Sorting Css property
css property ေတြကို ေရးတဲ႔အခါ a to z အစဥ္လိုက္ျဖစ္ေအာင္ ေတာ႔ ဘယ္ designer မွ မေရးၾကပါဘူး။အကယ္၍ အဲလို စီခ်င္တဲ႔ အခါမွာဆိုရင္ေတာ႔ ေအာက္ပါအတိုင္းသံုးႏိုင္ပါတယ္။
အရင္ဆံုး မိမိ sort လုပ္ခ်င္တဲ႔ property ေတြထဲမွာ cursor ခ်လိုက္ပါ။ selection လုပ္ဖို႔ Ctrl +Shift + M ကို ႏွိပ္လိုက္ပါ။ ဒါဆို bracket အတြင္းရွိ property အားလံုးကို select လုပ္ျပီးသြားပါျပီ။ အခု sort လုပ္ဖို႔ F5 ကိုႏွိပ္လိုက္ပါ။ ဒါဆို စီျပီးေနတာကိုေတြ႔ရပါမယ္။ တခ်ိဳ႕မွာေတာ႔ F9 ႏွိပ္ရတာကိုေတြ႔ရပါတယ္။
မေသခ်ာရင္ menu bar က Edit > Sort lines ကုိ ေရြးေပးပါ။
6.Code ေရးရာမွာ indent format ကို ဖတ္ရလြယ္ေအာင္ျပဳလုပ္မယ္။
အလြယ္ေျပာရရင္ code ေရးတဲ႔အခါမွာ code ေတြကို လိုအပ္သလို ဘယ္ဘက္မွ ခြာ၍ ေရးသားၾကရပါတယ္။ ဒါမွလည္း ဖတ္ရလြယ္ကူမွာျဖစ္ပါတယ္။
တခါတေလမွာ အရမ္းေတာ္တဲ႔ လုပ္ေဖာ္ကိုင္ဖတ္သူငယ္ခ်င္းရဲ႕ code ကို ယူျပင္ေပးရသည္ဆိုပါဆို ။ သိပ္ေတာ္ေတာ႔ သူက အမ်ားဖတ္တတ္တဲ႔ ပံုစံမ်ိဳး ခြာျပီးမေရးဘဲ အကုန္ကပ္ေရးထားတာမ်ိဳး။ ဒါမွမဟုတ္ ခြာခ်င္သလို ခြာေရးထားတာမ်ိဳး လုပ္ထားတာေပါ႔။ ဒီလိုဆိုရင္ သင္႔ကို sublime text က ဘယ္လို ကူညီႏိုင္မလဲ။
ဒါဆို ျပန္ျပီး format ခ်ခ်င္တဲ႔ code block ကို select လုပ္ေပးပါ။ ျပီးရင္ menu bar က Edit > Line > Reindent ကို ေရြးခ်ယ္ေပးပါ။ ဒါဆို အဆင္ေျပဆံုးပံုစံကို ျပင္ေပးသြားမွာပါ။ တစ္ခါတစ္ေလ လူကိုယ္တိုင္ နည္းနည္းျပင္ေပးရတာမ်ိဳးလည္းရွိတတ္ပါတယ္။
ေနာက္ထပ္သိတဲ႔အခါ ထပ္ေရးပါဦးမယ္။
(a) အသံုးျပဳမည့္ project folder ကို sidebar တြင္ေဖာ္ျပ အသံုးျပဳျခင္း
sidebar တြင္ မိမိ အသံုးျပဳမည့္ project folder ေပၚေနသည့္အတြက္ project ထဲက file တစ္ခု
ကို အလြယ္တကူ ဖြင့္လို႔ရသြားပါလိမ္႔မယ္။rename လုပ္ျခင္း delete လုပ္ျခင္း စသည္တုိ႔လည္း
လုပ္လုိ႔ရပါလိမ္႔မယ္
sidebar ထဲကိုယ္႔ project folder ထည့္မလဲဆိုရင္ နည္းလမ္း ႏွစ္ခုရွိပါတယ္။ တစ္ခုက
project folder ကို drag and drop လုပ္ျပီး sidebar ထဲထည့္ေပးပါ။ ေနာက္တစ္ခုကေတာ႔
menu bar က ေန File > Open Folder ကိုေရြးခ်ယ္ျပီး ေပၚလာတဲ႔ dialog box ထဲမွာ ကိုယ္ထည့္
ခ်င္တဲ႔ folder ကိုေရြးေပးလိုက္ပါ။
4. css file ေတြ edit လုပ္ရင္ပဲျဖစ္ျဖစ္ code file ေတြ edit လုပ္ရင္ပဲျဖစ္ျဖစ္ အသံုးတည့္တဲ႔နည္းေလးကိုေဖာ္ျပေပးပါမယ္။ css file ေတြဆိုရင္ selector ေတြ အမ်ားၾကီးေရးထားတဲ႔အခါ ရွာရအလြန္ခက္သြားပါတယ္။ code file ေတြမွာဆိုရင္လည္း function ေတြ အမ်ားၾကီး ပါ၀င္ေနတဲ႔အခါ ကိုယ္ရွာခ်င္တဲ႔ function ကိုရွာရခက္ပါတယ္။function နာမည္ကို အတိအက်သိရင္ Find နဲ႔ ရွာလို႔ရေပမယ့္ မေသခ်ာတဲ႔အခါ function list ထဲမွာရွာခ်င္တာမ်ိဳး ရွိလာမွာပါ။
ဒါဆို Ctrl + R ကို ႏွိပ္လိုက္ပါ။ function list က်လာပါလိမ္႔မယ္။ ေရြးလိုက္တာနဲ႔ အဲဒီ function ရွိတဲ႔ line ကို ေရာက္သြားမွာျဖစ္ပါတယ္။အလြန္အသံုး၀င္ပါတယ္။
5.Sorting Css property
css property ေတြကို ေရးတဲ႔အခါ a to z အစဥ္လိုက္ျဖစ္ေအာင္ ေတာ႔ ဘယ္ designer မွ မေရးၾကပါဘူး။အကယ္၍ အဲလို စီခ်င္တဲ႔ အခါမွာဆိုရင္ေတာ႔ ေအာက္ပါအတိုင္းသံုးႏိုင္ပါတယ္။
အရင္ဆံုး မိမိ sort လုပ္ခ်င္တဲ႔ property ေတြထဲမွာ cursor ခ်လိုက္ပါ။ selection လုပ္ဖို႔ Ctrl +Shift + M ကို ႏွိပ္လိုက္ပါ။ ဒါဆို bracket အတြင္းရွိ property အားလံုးကို select လုပ္ျပီးသြားပါျပီ။ အခု sort လုပ္ဖို႔ F5 ကိုႏွိပ္လိုက္ပါ။ ဒါဆို စီျပီးေနတာကိုေတြ႔ရပါမယ္။ တခ်ိဳ႕မွာေတာ႔ F9 ႏွိပ္ရတာကိုေတြ႔ရပါတယ္။
မေသခ်ာရင္ menu bar က Edit > Sort lines ကုိ ေရြးေပးပါ။
6.Code ေရးရာမွာ indent format ကို ဖတ္ရလြယ္ေအာင္ျပဳလုပ္မယ္။
အလြယ္ေျပာရရင္ code ေရးတဲ႔အခါမွာ code ေတြကို လိုအပ္သလို ဘယ္ဘက္မွ ခြာ၍ ေရးသားၾကရပါတယ္။ ဒါမွလည္း ဖတ္ရလြယ္ကူမွာျဖစ္ပါတယ္။
တခါတေလမွာ အရမ္းေတာ္တဲ႔ လုပ္ေဖာ္ကိုင္ဖတ္သူငယ္ခ်င္းရဲ႕ code ကို ယူျပင္ေပးရသည္ဆိုပါဆို ။ သိပ္ေတာ္ေတာ႔ သူက အမ်ားဖတ္တတ္တဲ႔ ပံုစံမ်ိဳး ခြာျပီးမေရးဘဲ အကုန္ကပ္ေရးထားတာမ်ိဳး။ ဒါမွမဟုတ္ ခြာခ်င္သလို ခြာေရးထားတာမ်ိဳး လုပ္ထားတာေပါ႔။ ဒီလိုဆိုရင္ သင္႔ကို sublime text က ဘယ္လို ကူညီႏိုင္မလဲ။
ဒါဆို ျပန္ျပီး format ခ်ခ်င္တဲ႔ code block ကို select လုပ္ေပးပါ။ ျပီးရင္ menu bar က Edit > Line > Reindent ကို ေရြးခ်ယ္ေပးပါ။ ဒါဆို အဆင္ေျပဆံုးပံုစံကို ျပင္ေပးသြားမွာပါ။ တစ္ခါတစ္ေလ လူကိုယ္တိုင္ နည္းနည္းျပင္ေပးရတာမ်ိဳးလည္းရွိတတ္ပါတယ္။
ေနာက္ထပ္သိတဲ႔အခါ ထပ္ေရးပါဦးမယ္။
EmoticonEmoticon