Web geli\u015ftirme d\u00fcnyas\u0131nda, kod kalitesi ve tutarl\u0131l\u0131\u011f\u0131, \u00f6zellikle b\u00fcy\u00fck projelerde veya tak\u0131m ortamlar\u0131nda hayati \u00f6neme sahiptir. ESLint, JavaScript ve TypeScript kodunuzdaki sorunlar\u0131 dinamik olarak bulman\u0131za ve d\u00fczeltmenize yard\u0131mc\u0131 olan, end\u00fcstri standard\u0131 bir linting arac\u0131d\u0131r. Create React App (CRA), React uygulamalar\u0131 geli\u015ftirmeye h\u0131zl\u0131 ve sorunsuz bir ba\u015flang\u0131\u00e7 yapman\u0131z\u0131 sa\u011flayan harika bir ara\u00e7t\u0131r. Ancak, CRA’n\u0131n varsay\u0131lan yap\u0131land\u0131rmas\u0131 bazen projenizin \u00f6zel ihtiya\u00e7lar\u0131n\u0131 kar\u015f\u0131lamayabilir. \u0130\u015fte bu noktada, CRA projenizi “eject” etmek ve ESLint kurallar\u0131n\u0131 tam olarak \u00f6zelle\u015ftirmek devreye girer.<\/p>\n
Bu rehberde, ejected bir Create React App projesinde ESLint kurallar\u0131n\u0131 nas\u0131l \u00f6zelle\u015ftirece\u011finizi ad\u0131m ad\u0131m inceleyece\u011fiz. Bu sayede, projenizin kod standartlar\u0131n\u0131 kendi gereksinimlerinize g\u00f6re \u015fekillendirebilecek ve geli\u015ftirme s\u00fcrecinizi daha verimli hale getirebileceksiniz.<\/p>\n
Create React App, Webpack, Babel, ESLint gibi karma\u015f\u0131k yap\u0131land\u0131rma ara\u00e7lar\u0131n\u0131 soyutlayarak size “s\u0131f\u0131r yap\u0131land\u0131rma” deneyimi sunar. Bu, ba\u015flang\u0131\u00e7 i\u00e7in harikad\u0131r, ancak zamanla daha fazla kontrol veya \u00f6zel entegrasyonlar isteyebilirsiniz. “Eject” i\u015flemi, CRA’n\u0131n dahili olarak kulland\u0131\u011f\u0131 t\u00fcm yap\u0131land\u0131rma dosyalar\u0131n\u0131 (Webpack, Babel, ESLint, Jest vb.) projenizin k\u00f6k dizinine \u00e7\u0131kar\u0131r. Bu i\u015flem, projeniz \u00fczerinde tam kontrol sahibi olman\u0131z\u0131 sa\u011flar, ancak geri al\u0131namaz bir i\u015flemdir.<\/p>\n
Eject i\u015flemi, projenizin yap\u0131land\u0131rmas\u0131n\u0131 kal\u0131c\u0131 olarak de\u011fi\u015ftirir. Bu nedenle, i\u015fleme ba\u015flamadan \u00f6nce a\u015fa\u011f\u0131daki ad\u0131mlar\u0131 uygulaman\u0131z \u015fiddetle tavsiye edilir:<\/p>\n
config<\/code> klas\u00f6r\u00fc) ne i\u015fe yarad\u0131\u011f\u0131n\u0131 anlamak, gelecekteki sorun giderme ve \u00f6zelle\u015ftirmeler i\u00e7in \u00f6nemlidir.<\/li>\n<\/ul>\nEject Komutunu \u00c7al\u0131\u015ft\u0131rma<\/h3>\n
Projenizin k\u00f6k dizininde a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131rarak eject i\u015flemini ba\u015flatabilirsiniz:<\/p>\n
npm run eject\nveya<\/h2>\nyarn eject\n<\/code><\/pre>\n
Bu komutu \u00e7al\u0131\u015ft\u0131rd\u0131ktan sonra, CRA size bu i\u015flemin geri al\u0131namaz oldu\u011funu ve devam etmek isteyip istemedi\u011finizi soracakt\u0131r. Onaylad\u0131\u011f\u0131n\u0131zda, CRA t\u00fcm yap\u0131land\u0131rma dosyalar\u0131n\u0131 projenizin k\u00f6k dizinindeki yeni bir config<\/code> klas\u00f6r\u00fcne kopyalayacak ve react-scripts<\/code> ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n\u0131 kald\u0131racakt\u0131r. Art\u0131k projeniz, CRA’n\u0131n soyutlamas\u0131 olmadan, kendi \u00f6zel yap\u0131land\u0131rmalar\u0131yla \u00e7al\u0131\u015fmaya haz\u0131r hale gelecektir.<\/p>\nEject i\u015flemi tamamland\u0131\u011f\u0131nda, projenizin k\u00f6k dizininde genellikle a\u015fa\u011f\u0131daki gibi bir yap\u0131 olu\u015fur:<\/p>\n
\nconfig\/<\/code>: Webpack, ESLint, Jest gibi ara\u00e7lar\u0131n yap\u0131land\u0131rma dosyalar\u0131n\u0131 i\u00e7erir.<\/li>\nscripts\/<\/code>: Ba\u015flatma, derleme, test gibi i\u015flemler i\u00e7in kullan\u0131lan yard\u0131mc\u0131 scriptleri i\u00e7erir.<\/li>\n<\/ul>\nESLint yap\u0131land\u0131rmas\u0131 genellikle config\/eslint.js<\/code> veya benzer bir isimle bu klas\u00f6rde yer alacakt\u0131r.<\/p>\n
\nEjected CRA’da ESLint Yap\u0131land\u0131rmas\u0131n\u0131 Anlama<\/h2>\n
Eject i\u015flemi sonras\u0131, projenizin ESLint yap\u0131land\u0131rma dosyas\u0131 genellikle config\/eslint.js<\/code> yolunda bulunur. Bu dosya, CommonJS mod\u00fcl\u00fcn\u00fc d\u0131\u015fa aktaran bir JavaScript dosyas\u0131d\u0131r ve ESLint’in \u00e7al\u0131\u015fma \u015feklini belirleyen t\u00fcm ayarlar\u0131 i\u00e7erir. Bu dosya, CRA’n\u0131n varsay\u0131lan ESLint yap\u0131land\u0131rmas\u0131n\u0131 temel al\u0131r ve \u00fczerine kendi de\u011fi\u015fikliklerinizi yapman\u0131za olanak tan\u0131r.<\/p>\nYap\u0131land\u0131rma Dosyas\u0131n\u0131n Temel B\u00f6l\u00fcmleri<\/h3>\n
Bir config\/eslint.js<\/code> dosyas\u0131 genellikle a\u015fa\u011f\u0131daki temel \u00f6zelliklere sahip olacakt\u0131r:<\/p>\n\/\/ config\/eslint.js\nmodule.exports = {\n root: true, \/\/ ESLint'in bu dizini projenin k\u00f6k\u00fc olarak kabul etmesini sa\u011flar\n \n parser: '@babel\/eslint-parser', \/\/ JavaScript kodunu \u00e7\u00f6z\u00fcmlemek i\u00e7in kullan\u0131lacak parser\n parserOptions: {\n ecmaVersion: 2020, \/\/ ECMAScript s\u00fcr\u00fcm\u00fc\n sourceType: 'module', \/\/ Mod\u00fcl sistemi (script veya module)\n ecmaFeatures: {\n jsx: true, \/\/ JSX deste\u011fini etkinle\u015ftir\n },\n babelOptions: { \/\/ @babel\/eslint-parser i\u00e7in Babel ayarlar\u0131\n presets: ['@babel\/preset-react', '@babel\/preset-env'],\n },\n },\n\n env: {\n browser: true, \/\/ Taray\u0131c\u0131 genel de\u011fi\u015fkenlerini etkinle\u015ftirir (window, document vb.)\n node: true, \/\/ Node.js genel de\u011fi\u015fkenlerini etkinle\u015ftirir (process, module vb.)\n jest: true, \/\/ Jest test ortam\u0131 genel de\u011fi\u015fkenlerini etkinle\u015ftirir\n },\n\n extends: [\n 'react-app', \/\/ Create React App'in varsay\u0131lan kurallar\u0131\n 'react-app\/jest', \/\/ Jest i\u00e7in CRA'n\u0131n varsay\u0131lan kurallar\u0131\n ],\n\n plugins: [\n 'react', \/\/ React ile ilgili kurallar\u0131 etkinle\u015ftirir\n 'jsx-a11y', \/\/ Eri\u015filebilirlik ile ilgili kurallar\u0131 etkinle\u015ftirir\n 'import', \/\/ Mod\u00fcl import\/export kurallar\u0131n\u0131 etkinle\u015ftirir\n ],\n\n rules: {\n \/\/ Kural \u00f6zelle\u015ftirmeleri buraya gelecek\n \/\/ \u00d6rne\u011fin:\n \/\/ 'no-unused-vars': 'warn',\n \/\/ 'semi': ['error', 'always'],\n },\n\n settings: {\n react: {\n version: 'detect', \/\/ React versiyonunu otomatik alg\u0131la\n },\n },\n};\n<\/code><\/pre>\nTemel \u00d6zelliklerin A\u00e7\u0131klamas\u0131:<\/h4>\n\nroot<\/code>: ESLint’in bu yap\u0131land\u0131rma dosyas\u0131n\u0131 projenin k\u00f6k\u00fc olarak kabul etmesini sa\u011flar.<\/li>\nparser<\/code>: ESLint’in kodunuzu \u00e7\u00f6z\u00fcmlemek i\u00e7in kullanaca\u011f\u0131 parser’\u0131 belirtir. CRA genellikle @babel\/eslint-parser<\/code> kullan\u0131r.<\/li>\nparserOptions<\/code>: Parser’a \u00f6zel se\u00e7enekler sunar. ECMAScript s\u00fcr\u00fcm\u00fc, JSX deste\u011fi, mod\u00fcl tipi gibi ayarlar burada yap\u0131l\u0131r.<\/li>\nenv<\/code>: Global de\u011fi\u015fkenlerin hangi ortamlar i\u00e7in tan\u0131mlanaca\u011f\u0131n\u0131 belirtir (\u00f6rne\u011fin, browser: true<\/code>, node: true<\/code>).<\/li>\nextends<\/code>: Ba\u015fka bir yap\u0131land\u0131rma dosyas\u0131n\u0131n kurallar\u0131n\u0131 ve ayarlar\u0131n\u0131 devralman\u0131z\u0131 sa\u011flar. CRA’n\u0131n varsay\u0131lan\u0131 react-app<\/code> ve react-app\/jest<\/code>‘i i\u00e7erir.<\/li>\nplugins<\/code>: ESLint’e ek kural setleri veya i\u015flevsellik sa\u011flayan eklentileri y\u00fckler. \u00d6rne\u011fin, react<\/code>, jsx-a11y<\/code> gibi.<\/li>\nrules<\/code>: ESLint kurallar\u0131n\u0131 tek tek \u00f6zelle\u015ftirdi\u011finiz b\u00f6l\u00fcmd\u00fcr. Burada bir kural\u0131 kapatabilir, seviyesini de\u011fi\u015ftirebilir veya \u00f6zel se\u00e7enekler tan\u0131mlayabilirsiniz.<\/li>\nsettings<\/code>: Eklentilere veya parser’a \u00f6zel ayarlar\u0131 i\u00e7erir (\u00f6rne\u011fin, React versiyonunu alg\u0131lama).<\/li>\n<\/ul>\n
\nESLint Kurallar\u0131n\u0131 \u00d6zelle\u015ftirme<\/h2>\n
Art\u0131k ESLint yap\u0131land\u0131rma dosyas\u0131n\u0131n yap\u0131s\u0131n\u0131 anlad\u0131\u011f\u0131n\u0131za g\u00f6re, kendi projenizin ihtiya\u00e7lar\u0131na g\u00f6re kurallar\u0131 \u00f6zelle\u015ftirmeye ba\u015flayabiliriz. rules<\/code> objesi, bu \u00f6zelle\u015ftirmelerin ana merkezidir.<\/p>\nMevcut Kurallar\u0131 De\u011fi\u015ftirme veya Kapatma<\/h3>\n
rules<\/code> objesi i\u00e7inde, her bir kural\u0131 bir anahtar-de\u011fer \u00e7ifti olarak tan\u0131mlars\u0131n\u0131z. De\u011fer, kural\u0131n uygulama seviyesini ve varsa se\u00e7eneklerini belirtir:<\/p>\n\n\"off\"<\/code> veya 0<\/code>: Kural\u0131 tamamen kapat\u0131r.<\/li>\n\"warn\"<\/code> veya 1<\/code>: Kural ihlalinde uyar\u0131 verir (kod y\u00fcr\u00fctmeyi engellemez).<\/li>\n\"error\"<\/code> veya 2<\/code>: Kural ihlalinde hata verir (kod y\u00fcr\u00fctmeyi engeller, \u00e7o\u011fu CI\/CD ortam\u0131nda derlemeyi durdurur).<\/li>\n<\/ul>\nBaz\u0131 kurallar ek se\u00e7enekler de alabilir. Bu durumda, seviyeyi ve se\u00e7enekleri i\u00e7eren bir dizi kullan\u0131rs\u0131n\u0131z (\u00f6rne\u011fin, ['error', 'always']<\/code>).<\/p>\n\u00d6rnek: Baz\u0131 Yayg\u0131n Kurallar\u0131 \u00d6zelle\u015ftirme<\/h4>\n
CRA’n\u0131n varsay\u0131lan kurallar\u0131n\u0131 korurken, kendi \u00f6zel kurallar\u0131n\u0131z\u0131 ekleyebilir veya mevcut olanlar\u0131 de\u011fi\u015ftirebilirsiniz:<\/p>\n
\/\/ config\/eslint.js\nmodule.exports = {\n \/\/ ... di\u011fer ayarlar\n rules: {\n ...require('eslint-config-react-app').rules, \/\/ CRA'n\u0131n varsay\u0131lan kurallar\u0131n\u0131 koru\n \/\/ Kendi \u00f6zel kurallar\u0131n\u0131z\u0131 buraya ekleyin veya de\u011fi\u015ftirin\n \n \/\/ Her ifadenin sonunda noktal\u0131 virg\u00fcl zorunlu (hata verir)\n 'semi': ['error', 'always'], \n \n \/\/ 2 bo\u015fluklu girinti kullan (uyar\u0131 verir)\n 'indent': ['warn', 2], \n \n \/\/ console.log kullan\u0131m\u0131na uyar\u0131 ver (hata vermez, sadece uyar\u0131r)\n 'no-console': 'warn', \n \n \/\/ Kullan\u0131lmayan de\u011fi\u015fkenlere hata ver, ancak arg\u00fcmanlar\u0131 g\u00f6rmezden gel\n 'no-unused-vars': ['error', { args: 'none' }], \n \n \/\/ Tek t\u0131rnak kullan\u0131m\u0131n\u0131 zorunlu k\u0131l\n 'quotes': ['error', 'single'], \n \n \/\/ React 17 ve sonras\u0131 i\u00e7in gereksiz olan kurallar\u0131 kapat (JSX d\u00f6n\u00fc\u015f\u00fcmlerini otomatik yapar)\n 'react\/jsx-uses-react': 'off', \n 'react\/react-in-jsx-scope': 'off',\n \n \/\/ Default export yerine named export tercih et (\u00f6rnek \u00f6zel kural)\n 'import\/prefer-default-export': 'off', \n },\n \/\/ ...\n};\n<\/code><\/pre>\nYeni Eklentiler (Plugins) ve Geni\u015fletmeler (Extends) Ekleme<\/h3>\n
ESLint’in g\u00fcc\u00fc, geni\u015f eklenti ekosisteminden gelir. Yeni kural setleri veya belirli bir teknolojiye (\u00f6rne\u011fin Prettier, TypeScript) y\u00f6nelik linting sa\u011flamak i\u00e7in eklentileri kullanabilirsiniz.<\/p>\n
\u00d6rnek: Prettier Entegrasyonu<\/h4>\n
Prettier, kodunuzu otomatik olarak bi\u00e7imlendiren pop\u00fcler bir ara\u00e7t\u0131r. ESLint ile Prettier’\u0131 entegre etmek, hem bi\u00e7imlendirme hem de kod kalitesi kontrollerini bir arada tutman\u0131z\u0131 sa\u011flar.<\/p>\n
\n- Gerekli Ba\u011f\u0131ml\u0131l\u0131klar\u0131 Y\u00fckleyin:<\/strong><\/li>\n
npm install eslint-plugin-prettier eslint-config-prettier --save-dev\nveya<\/h2>\nyarn add eslint-plugin-prettier eslint-config-prettier --dev\n<\/code><\/pre>\n
config\/eslint.js<\/code> Dosyas\u0131n\u0131 G\u00fcncelleyin:<\/strong><\/li>\nextends<\/code> ve plugins<\/code> b\u00f6l\u00fcmlerine Prettier’\u0131 ekleyin ve rules<\/code> k\u0131sm\u0131na Prettier kural\u0131n\u0131 tan\u0131mlay\u0131n.<\/p>\n\/\/ config\/eslint.js\nmodule.exports = {\n \/\/ ... di\u011fer ayarlar\n extends: [\n 'react-app',\n 'react-app\/jest',\n 'prettier', \/\/ Prettier yap\u0131land\u0131rmas\u0131n\u0131 en sona ekleyin\n ],\n plugins: [\n 'react',\n 'jsx-a11y',\n 'import',\n 'prettier', \/\/ Prettier eklentisini ekleyin\n ],\n rules: {\n \/\/ ... di\u011fer kurallar\n 'prettier\/prettier': 'error', \/\/ Prettier ihlallerini hata olarak g\u00f6ster\n },\n \/\/ ...\n};\n<\/code><\/pre>\nextends<\/code> dizisinde prettier<\/code>‘\u0131n en sonda olmas\u0131 \u00f6nemlidir, \u00e7\u00fcnk\u00fc Prettier, di\u011fer t\u00fcm bi\u00e7imlendirme kurallar\u0131n\u0131 ge\u00e7ersiz k\u0131lar ve kendi kurallar\u0131n\u0131 uygular.<\/p>\n<\/ol>\n\u00d6rnek: TypeScript Deste\u011fi (E\u011fer projenizde TypeScript kullan\u0131yorsan\u0131z)<\/h4>\n
E\u011fer projeniz TypeScript kullan\u0131yorsa, ESLint’in TypeScript kodunu do\u011fru bir \u015fekilde lintlemesi i\u00e7in \u00f6zel parser ve eklentilere ihtiyac\u0131n\u0131z olacakt\u0131r.<\/p>\n
\n- Gerekli Ba\u011f\u0131ml\u0131l\u0131klar\u0131 Y\u00fckleyin:<\/strong><\/li>\n
npm install @typescript-eslint\/parser @typescript-eslint\/eslint-plugin --save-dev\nveya<\/h2>\nyarn add @typescript-eslint\/parser @typescript-eslint\/eslint-plugin --dev\n<\/code><\/pre>\n
config\/eslint.js<\/code> Dosyas\u0131n\u0131 G\u00fcncelleyin:<\/strong><\/li>\n\/\/ config\/eslint.js\nmodule.exports = {\n \/\/ ...\n parser: '@typescript-eslint\/parser', \/\/ TypeScript parser'\u0131 kullan\n parserOptions: {\n \/\/ ... di\u011fer parserOptions\n project: '.\/tsconfig.json', \/\/ TypeScript projenizin tsconfig.json dosyas\u0131n\u0131 belirtin\n },\n extends: [\n 'react-app',\n 'react-app\/jest',\n 'plugin:@typescript-eslint\/recommended', \/\/ TypeScript i\u00e7in \u00f6nerilen kurallar\n 'plugin:@typescript-eslint\/eslint-recommended', \/\/ TypeScript'in ESLint'i devre d\u0131\u015f\u0131 b\u0131rakmas\u0131n\u0131 sa\u011flar\n \/\/ E\u011fer prettier da kullan\u0131yorsan\u0131z:\n \/\/ 'prettier\/@typescript-eslint', \/\/ Prettier ile TypeScript \u00e7ak\u0131\u015fmas\u0131n\u0131 \u00f6nler (eski versiyonlar i\u00e7in)\n \/\/ 'plugin:prettier\/recommended' \/\/ Prettier'\u0131n son s\u00fcr\u00fcm\u00fc i\u00e7in bu yeterli olabilir\n ],\n plugins: [\n 'react',\n 'jsx-a11y',\n 'import',\n '@typescript-eslint', \/\/ TypeScript eklentisini ekleyin\n \/\/ 'prettier' \/\/ E\u011fer prettier kullan\u0131yorsan\u0131z\n ],\n rules: {\n \/\/ ... di\u011fer kurallar\n \/\/ TypeScript'e \u00f6zel kurallar ekleyebilirsiniz\n '@typescript-eslint\/explicit-module-boundary-types': 'off', \/\/ Fonksiyon d\u00f6n\u00fc\u015f tiplerini zorunlu k\u0131lma\n '@typescript-eslint\/no-unused-vars': ['warn', { args: 'none' }], \/\/ Kullan\u0131lmayan TS de\u011fi\u015fkenleri i\u00e7in uyar\u0131\n },\n \/\/ ...\n};\n<\/code><\/pre>\nTypeScript ile ESLint entegrasyonu biraz daha karma\u015f\u0131k olabilir. \u00d6zellikle parserOptions.project<\/code> ayar\u0131, performans i\u00e7in \u00f6nemlidir.<\/p>\n<\/ol>\n
\nPratik \u0130pu\u00e7lar\u0131 ve En \u0130yi Uygulamalar<\/h2>\n1. S\u00fcr\u00fcm Kontrol\u00fc ve Yedekleme<\/h3>\n
Eject i\u015fleminden \u00f6nce ve sonra projenizi Git ile commit etmek, olas\u0131 sorunlarda geri d\u00f6nmenizi sa\u011flar. Yap\u0131land\u0131rma dosyalar\u0131nda de\u011fi\u015fiklik yaparken de s\u0131k s\u0131k commit yap\u0131n.<\/p>\n
2. Kademeli De\u011fi\u015fiklikler<\/h3>\n
T\u00fcm ESLint kurallar\u0131n\u0131 bir kerede de\u011fi\u015ftirmeye \u00e7al\u0131\u015fmay\u0131n. K\u00fc\u00e7\u00fck, art\u0131ml\u0131 de\u011fi\u015fiklikler yap\u0131n ve her de\u011fi\u015fiklikten sonra lint testlerini \u00e7al\u0131\u015ft\u0131r\u0131n (npm run lint<\/code> veya yarn lint<\/code>). Bu, hatalar\u0131 izole etmenizi kolayla\u015ft\u0131r\u0131r.<\/p>\n3. Editor Entegrasyonu<\/h3>\n
VS Code, WebStorm gibi modern kod edit\u00f6rleri, ESLint eklentileriyle birlikte gelir. Bu eklentiler, kod yazarken hatalar\u0131 ve uyar\u0131lar\u0131 an\u0131nda g\u00f6rmenizi sa\u011flar, bu da geli\u015ftirme h\u0131z\u0131n\u0131z\u0131 art\u0131r\u0131r.<\/p>\n
4. Tak\u0131m \u00c7al\u0131\u015fmas\u0131 ve Ortak Standartlar<\/h3>\n
E\u011fer bir tak\u0131mda \u00e7al\u0131\u015f\u0131yorsan\u0131z, ESLint yap\u0131land\u0131rman\u0131z\u0131n herkes taraf\u0131ndan anla\u015f\u0131lmas\u0131 ve benimsenmesi \u00f6nemlidir. Ortak bir kod standard\u0131, tak\u0131m\u0131n verimlili\u011fini ve kod kalitesini art\u0131r\u0131r. Yap\u0131land\u0131rma dosyas\u0131n\u0131 Git’e dahil edin.<\/p>\n
5. Alternatif Yakla\u015f\u0131mlar<\/h3>\n
Eject i\u015flemi, projeniz \u00fczerinde tam kontrol sa\u011flar, ancak ayn\u0131 zamanda yap\u0131land\u0131rma dosyalar\u0131n\u0131n bak\u0131m\u0131n\u0131 \u00fcstlenmeniz gerekti\u011fi anlam\u0131na gelir. E\u011fer sadece k\u00fc\u00e7\u00fck yap\u0131land\u0131rma de\u011fi\u015fiklikleri yapmak istiyorsan\u0131z ve tam kontrol ihtiyac\u0131n\u0131z yoksa, CRACO (Create React App Configuration Override) veya react-app-rewired<\/code> gibi ara\u00e7lar\u0131 d\u00fc\u015f\u00fcnebilirsiniz. Bu ara\u00e7lar, eject yapmadan CRA’n\u0131n dahili yap\u0131land\u0131rmas\u0131n\u0131 de\u011fi\u015ftirmenize olanak tan\u0131r.<\/p>\n6. Lint Komutunu \u00c7al\u0131\u015ft\u0131rma<\/h3>\n
De\u011fi\u015fikliklerinizi test etmek i\u00e7in projenizin k\u00f6k dizininde a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n
npm run lint\nveya<\/h2>\nyarn lint\n<\/code><\/pre>\n
Bu komut, projenizdeki t\u00fcm dosyalar\u0131 ESLint kurallar\u0131n\u0131za g\u00f6re kontrol edecek ve varsa hatalar\u0131 veya uyar\u0131lar\u0131 rapor edecektir.<\/p>\n
\nSonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h2>\n
Ejected bir Create React App projesinde ESLint kurallar\u0131n\u0131 \u00f6zelle\u015ftirmek, projeniz \u00fczerinde tam kontrol sahibi olman\u0131n ve kod kalitenizi kendi standartlar\u0131n\u0131za g\u00f6re \u015fekillendirmenin g\u00fc\u00e7l\u00fc bir yoludur. Bu s\u00fcre\u00e7, ilk ba\u015fta karma\u015f\u0131k g\u00f6r\u00fcnse de, ad\u0131m ad\u0131m ilerleyerek ve yap\u0131land\u0131rma dosyas\u0131n\u0131n temel bile\u015fenlerini anlayarak kolayca y\u00f6netilebilir hale gelir.<\/p>\n
Do\u011fru ESLint yap\u0131land\u0131rmas\u0131 ile:<\/p>\n
\n- Kodunuz daha tutarl\u0131 ve okunabilir olur.<\/li>\n
- Potansiyel hatalar erken a\u015famada yakalan\u0131r.<\/li>\n
- Tak\u0131m i\u00e7i kod standartlar\u0131 daha kolay uygulan\u0131r.<\/li>\n
- Geli\u015ftirme s\u00fcreci daha verimli hale gelir.<\/li>\n<\/ul>\n
Unutmay\u0131n, eject i\u015flemi geri al\u0131namaz olsa da, sundu\u011fu esneklik ve kontrol, b\u00fcy\u00fck ve \u00f6zelle\u015ftirilmi\u015f React projeleri i\u00e7in paha bi\u00e7ilmezdir.<\/p>\n
S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\nEject i\u015flemi geri al\u0131nabilir mi?<\/h3>\n
Hay\u0131r, eject i\u015flemi geri al\u0131namaz. Bu nedenle, i\u015flemi yapmadan \u00f6nce projenizin yede\u011fini almak veya Git ile commit etmek kritik \u00f6neme sahiptir.<\/p>\n
Eject sonras\u0131 ESLint hatalar\u0131 nas\u0131l \u00e7\u00f6z\u00fcl\u00fcr?<\/h3>\n
Eject sonras\u0131 beklenmedik ESLint hatalar\u0131yla kar\u015f\u0131la\u015f\u0131rsan\u0131z, genellikle config\/eslint.js<\/code> dosyas\u0131n\u0131 d\u00fczenleyerek ilgili kural\u0131 kapatabilir (\"off\"<\/code>) veya seviyesini d\u00fc\u015f\u00fcrebilirsiniz (\"warn\"<\/code>). Hata mesajlar\u0131n\u0131 dikkatlice okuyarak hangi kural\u0131n ihlal edildi\u011fini belirleyin.<\/p>\nNeden CRACO veya react-app-rewired kullanmayay\u0131m?<\/h3>\n
CRACO veya react-app-rewired<\/code> gibi ara\u00e7lar, eject yapmadan CRA’n\u0131n dahili yap\u0131land\u0131rmas\u0131n\u0131 de\u011fi\u015ftirmek i\u00e7in harika alternatiflerdir. Ancak bu ara\u00e7lar, CRA’n\u0131n temel yap\u0131land\u0131rmas\u0131n\u0131 sadece “\u00fczerine yazma” (override) imkan\u0131 sunar. Eject i\u015flemi ise, t\u00fcm yap\u0131land\u0131rma dosyalar\u0131n\u0131 projenize \u00e7\u0131kararak size tam ve s\u0131n\u0131rs\u0131z kontrol sa\u011flar. Se\u00e7iminiz, projenizin karma\u015f\u0131kl\u0131\u011f\u0131na ve ihtiya\u00e7 duydu\u011funuz kontrol seviyesine ba\u011fl\u0131 olmal\u0131d\u0131r.<\/p>\nESLint config dosyas\u0131n\u0131 ayr\u0131 bir yere ta\u015f\u0131yabilir miyim?<\/h3>\n
Evet, ta\u015f\u0131yabilirsiniz. Ancak, ESLint’in yeni konumu bilmesi i\u00e7in package.json<\/code> dosyan\u0131zdaki eslintConfig<\/code> alan\u0131n\u0131 veya ESLint CLI komutunuzu (--config<\/code>) g\u00fcncellemeniz gerekebilir. Ejected CRA’da genellikle config\/eslint.js<\/code> varsay\u0131lan olarak kullan\u0131l\u0131r.<\/p>\nYeni bir ESLint kural\u0131 ekledim ama \u00e7al\u0131\u015fm\u0131yor, ne yapmal\u0131y\u0131m?<\/h3>\n
\u015eu ad\u0131mlar\u0131 kontrol edin:<\/p>\n
\n- Kural ad\u0131n\u0131n do\u011fru yaz\u0131ld\u0131\u011f\u0131ndan emin olun.<\/li>\n
- E\u011fer kural bir eklentiye aitse, o eklentinin y\u00fckl\u00fc oldu\u011fundan ve
plugins<\/code> dizisinde tan\u0131mland\u0131\u011f\u0131ndan emin olun.<\/li>\nnpm run lint<\/code> komutunu \u00e7al\u0131\u015ft\u0131rarak konsoldaki hata mesajlar\u0131n\u0131 kontrol edin. Bazen ESLint, yap\u0131land\u0131rma dosyas\u0131ndaki s\u00f6zdizimi hatalar\u0131n\u0131 veya ge\u00e7ersiz kural adlar\u0131n\u0131 bildirir.<\/li>\n- \u00d6nbelle\u011fi temizlemek i\u00e7in
node_modules\/.cache<\/code> klas\u00f6r\u00fcn\u00fc silebilir ve tekrar deneyebilirsiniz.<\/li>\n<\/ol>\n<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Web geli\u015ftirme d\u00fcnyas\u0131nda, kod kalitesi ve tutarl\u0131l\u0131\u011f\u0131, \u00f6zellikle b\u00fcy\u00fck projelerde veya tak\u0131m ortamlar\u0131nda hayati \u00f6neme sahiptir. ESLin","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[128],"tags":[],"class_list":{"0":"post-34666","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n
Create React App'i Eject Etme S\u00fcreci - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/create-react-appi-eject-etme-sureci\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create React App'i Eject Etme S\u00fcreci\" \/>\n<meta property=\"og:description\" content=\"Web geli\u015ftirme d\u00fcnyas\u0131nda, kod kalitesi ve tutarl\u0131l\u0131\u011f\u0131, \u00f6zellikle b\u00fcy\u00fck projelerde veya tak\u0131m ortamlar\u0131nda hayati \u00f6neme sahiptir. ESLin\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/create-react-appi-eject-etme-sureci\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-20T08:41:51+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/create-react-appi-eject-etme-sureci\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/create-react-appi-eject-etme-sureci\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Create React App’i Eject Etme S\u00fcreci\",\"datePublished\":\"2025-11-20T08:41:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/create-react-appi-eject-etme-sureci\/\"},\"wordCount\":1842,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"React\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/create-react-appi-eject-etme-sureci\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/create-react-appi-eject-etme-sureci\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/create-react-appi-eject-etme-sureci\/\",\"name\":\"Create React App'i Eject Etme S\u00fcreci - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-20T08:41:51+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/create-react-appi-eject-etme-sureci\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/create-react-appi-eject-etme-sureci\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/create-react-appi-eject-etme-sureci\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create React App’i Eject Etme S\u00fcreci\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Create React App'i Eject Etme S\u00fcreci - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/create-react-appi-eject-etme-sureci\/","og_locale":"tr_TR","og_type":"article","og_title":"Create React App'i Eject Etme S\u00fcreci","og_description":"Web geli\u015ftirme d\u00fcnyas\u0131nda, kod kalitesi ve tutarl\u0131l\u0131\u011f\u0131, \u00f6zellikle b\u00fcy\u00fck projelerde veya tak\u0131m ortamlar\u0131nda hayati \u00f6neme sahiptir. ESLin","og_url":"https:\/\/fatihsoysal.com\/blog\/create-react-appi-eject-etme-sureci\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-20T08:41:51+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"12 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/create-react-appi-eject-etme-sureci\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/create-react-appi-eject-etme-sureci\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Create React App’i Eject Etme S\u00fcreci","datePublished":"2025-11-20T08:41:51+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/create-react-appi-eject-etme-sureci\/"},"wordCount":1842,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["React"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/create-react-appi-eject-etme-sureci\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/create-react-appi-eject-etme-sureci\/","url":"https:\/\/fatihsoysal.com\/blog\/create-react-appi-eject-etme-sureci\/","name":"Create React App'i Eject Etme S\u00fcreci - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-20T08:41:51+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/create-react-appi-eject-etme-sureci\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/create-react-appi-eject-etme-sureci\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/create-react-appi-eject-etme-sureci\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create React App’i Eject Etme S\u00fcreci"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34666","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=34666"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34666\/revisions"}],"predecessor-version":[{"id":34667,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34666\/revisions\/34667"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=34666"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=34666"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=34666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}