React, HTML vb. alanlarda kod yazarken, eğer programlama yeni başlamadıysanız ve Youtube’da siz de herkes gibi videolar izleyip öğrenmeye çalışıyorsanız, herkesin kullandığı bir özelliği fark etmiş olmalısınız. Sadece bir veya bir kaç harf yazarak, çok fazla kodun otomatik olarak yazılmasını sağlıyorlar. Bunu yapan eklentiler mevcut. Özellikle React için ES7 React/Redux/GraphQL/React-Native snippets gibi bir eklentiyi kullanıyor olabilirsiniz. Bunun dışında Visual Studio Code’u yüklediğinizde otomatik olarak entegre edilmiş olan Emmet’i kullanıyor olabilirsiniz. Kodlarken bizi çok fazla hızlandıran bu özelliklerden herkes faydalanıyor. İsterseniz ne demek istediğimi bir örnekle açıklayayım.
- Emmet kullanarak HTML dosyanızda sadece “!” tuşuna başın. Emmet kısaltması otomatik olarak gözükecektir. Klavyenizden “Tab” tuşuna bastığınızda otomatik olarak aşağıdaki kodu yazacak:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
Yukarıdaki kod genelde HTML dosyası oluşturduğumuzda başlangıçta yazdığımız kod.
Bir başka örnek de React için kullandığımız functional component kodu. Bunun için de, eğer eklentiyi yüklediyseniz JavaScript dosyasının içinde “rafcp” yazdığınızda size önerdiği snippet şunu yazacak:
import React from 'react'
import PropTypes from 'prop-types'
const [ComponentName] = props => {
return (
<div>
</div>
)
}
[ComponentName].propTypes = {
}
export default [ComponentName]
Not: “[ComponentName]” olan kısma dosyanın adı geliyor.
Bu ve benzeri snippetler bizim kod yazma hızımızı gözle görülür bir farkla arttırıyor. Diğer snippetleri eklentiyi yükledikten sonra eklentinin dokümantasyonundan öğrenebilirsiniz. Eliniz alıştığında ve snippetleri tekrar tekrar kullandığınızda hızlandığınızı fark edeceksiniz. Ama makalemizin konusu bu snippetlerden bahsetmek değil, bunu bir adım daha ileri götürerek, kendi snippetimizi yazmak. Bazı zamanlarda, eklentilerin kullandığı snippetler yetersiz gelebilir veya siz daha farklı bir snippete ihtiyaç duyabilirsiniz. Örneğin, benim sürekli yazdığım şu kod var:
import Test from './Test'; export default Test;
Bunlar için de snippet mevcut. Ama bu şekilde bir snippet mevcut değil. En azından ben bilmiyorum. Sonuç olarak bunu kendim de yapabiliyorum. Yukarıdaki örneğin snippetini yapalım isterseniz.
Kendi Snippetimizi Yazalım
Yapmamız gereken ilk şey, VS Code’da
File -> Preferences -> User Snippets
adımlarını uygulamak.
Buraya tıkladığınızda VS Code size ne yapmak istediğinizi soracak. Daha sonra “New Global Snippets file…” seçeneğini seçiyoruz.
Karşınıza örnek bir kod çıkacak. Ama bu kod commentlenmiş bir şekilde olacak. Size sadece başlangıçta yönlendirici olması için var bu kısım. Önce yukarıdaki örneği nasıl oluşturduğuma bakalım.
"import-export": {
"scope": "javascript",
"prefix": "impexp",
"body": [
"import ${0:Component} from './${0:Component}';",
"",
"export default ${0:Component};"
],
"description": "Importing and exporting the component inside index.js file."
}
Sırayla nasıl çalıştığına bakalım.
“import-export”: Burada sadece bir isim veriyoruz. Bu kısmın “unique” yani eşsiz olması lazım. Bu dosyanın içinde tekrar bunu kullanmamalısınız.
“scope”: Burada basitçe, snippetimizin hangi alanda çalışmasını istediğimizi belirtiyoruz. Benim yazdığım snippet “javascript” dosyalarında çalışacak. Birden fazla scope belirtmek istiyorsanız, aralarına virgül koymanız yeterli. Mesela, “javascript,html” gibi.
“prefix”: Burada snippetimizin hangi kısayol karakterlerini girdiğimizde görünmesini istiyorsak onu yazıyoruz. Mesela, ben “impexp” yazdığımda otomatik olarak snippet önerisi gözükecek.
“body”: Snippetimizin içeriği buraya gelecek. Burası ile ayrıntılı bilgiyi en iyi dokümantasyondan alırsınız. Ama yine de ne yaptığımızı kısaca anlatayım. İlk önce yazdırmak istediğiniz şeyi bir array olarak düşünün. Arrayin elemanları da satırlar olsun. Benim yaptığım yöntem, önce ne yazdırmak istiyorsam, direkt bir şekilde yazıyorum. Daha sonra snippette değişmesi gereken değişkenleri düzenlemeye başlıyorum. Yazdırmak istediğimiz şey şu:
import Test from './Test'; export default Test;
Buradaki değişkenimiz “Test” yazısı. Yani componentin adı. Bu nedenle snippette
${0:Component}
olarak yazdığım yer benim değişkenim oluyor. Buradaki “0” değişkenin ID’si. Yani ben başka bir yerde daha “0” yazarsam, snippeti çalıştırdığımızda “0” olarak eklenen yerleri düzenlersek, tüm “0” ID’sine sahip kısımlar düzenlenmiş olacak. İki nokta koyup, yazdığım kısım ise “placeholder” yani bu değişkenin yerine gelecek olan yazı. Bunu yazmak zorunda değilsiniz. Eğer placeholder istemiyorsanız basitçe “$0” yazabilirsiniz.
“description”: Snippetimize bir açıklama giriyoruz. Bu sayede daha karışık bir snippet eklediğimizde, “body” kısmını okuyup anlamaya çalışmak yerine ne yaptığını anlamış olacağız.
Daha ayrıntılı bir dokümantasyona ihtiyacınız varsa aşağıdaki bağlantıyı kullanabilirsiniz.
Pekişmesi için biraz daha karışık bir snippet yazalım.
"func-comp-with-translation-and-props": {
"scope": "javascript",
"prefix": "rfcwt",
"body": [
"import React from 'react';",
"import PropTypes from 'prop-types';",
"import { withTranslation } from 'react-i18next';",
"",
"import styles from './$TM_FILENAME_BASE.module.css';",
"",
"const $TM_FILENAME_BASE = ({ t }) => {",
"\t return (",
"\t\t<div>",
"\t\t\t$0",
"\t\t</div>",
"\t);",
"};",
"",
"$TM_FILENAME_BASE.propTypes = {",
"\tt: PropTypes.func.isRequired,",
"};",
"",
"export default withTranslation()($TM_FILENAME_BASE);"
],
"description": "Functional component with prop types, styles and translation."
},
Yukarıdaki snippette, “Contact.js” isimli bir JavaScript dosyasında “rfcwt” yazdığımızda şöyle bir sonuç veriyor:
import React from 'react';
import PropTypes from 'prop-types';
import { withTranslation } from 'react-i18next';
import styles from './Contact.module.css';
const Contact = ({ t }) => {
return (
<div>
</div>
);
};
Contact.propTypes = {
t: PropTypes.func.isRequired,
};
export default withTranslation()(Contact);
Önceki örnekten farklı olarak burada “$TM_FILENAME_BASE” diye bir değişken kullandık. Bu değişkeni, VS Code’un sağlıyor. Aslında basitçe, üzerinde çalıştığımız dosyanın ismini uzantısız bir şekilde bize veriyor. Son olarak “\t” de aslında “Tab” için kullanılıyor. Bu ve benzeri değişkenlere de VS Code’un dokümantasyonundan ulaşabilirsiniz.
Eğer sizin de, geliştirme yaparken sürekli, tekrar tekrar yazdığınız kod blokları varsa, bunları snippete çevirmenin size çok büyük faydası olacaktır.