Mengapa itu perlu?

Ketika lebih dari satu orang bekerja di tim Anda, dengan satu atau lain cara, semua orang dihadapkan pada masalah gaya pengkodean yang berbeda untuk setiap anggota tim. Seseorang menulis tanda kurung untuk blok if...else, seseorang tidak. Ketika proyek menjadi lebih besar, lebih sulit untuk membaca kode seperti itu dan bahkan lebih sulit untuk melakukan tinjauan kode.

Agar ulasan kode dan pertemuan tim lainnya tidak berubah menjadi diskusi tab vs spasi dengan nada tinggi, lebih baik untuk mengkonfigurasi repositori sehingga proyek itu sendiri tidak memungkinkan penulisan kode yang tidak valid dan tidak standar untuk tim.

Di satu sisi, penggunaan gaya pengkodean yang berbeda mungkin tampak berselera, tidak layak diperhatikan. Yah, June tidak membungkus satu baris kode setelah kondisi if, tetapi seseorang menulis, jadi apa? Jika Anda meninggalkan kode dari bawah pena Juni “apa adanya”, maka ini bisa menjadi “bom waktu”: baris kode itu ifdapat dihapus setelah itu, dan kemudian baris berikutnya akan jatuh dalam kondisi tersebut. Tentu saja, situasi ini biasanya terperangkap dalam tinjauan kode, tetapi kebetulan bahwa bug potensial ini lulus tes, dan berikut adalah dua alasan utama:

1. Kita semua orang, dan orang-orang salah.
2. Orang-orang sosial, yang berarti mereka tidak akan mau masuk ke dalam "konflik" dengan gaya. Dan di sini dua opsi dimungkinkan:
   
   • "Lebih baik perbaiki sendiri," pikir pengulas, dan aturan kode.
   • Inspektur mogok pada bulan Juni dan mengungkapkan keraguannya tentang kecukupan dan perlunya keberadaan.

Bagaimana kita memastikan bahwa semua orang menulis sesuai dengan gaya tim? Mengalahkan kode review setiap kali menurunkan motivasi pembuat kode dan inspektur itu sendiri. Untungnya, masalah ini menggairahkan pikiran lebih dari satu programmer selama lebih dari satu tahun, dan sekarang kami memiliki banyak alat yang kami miliki.

Tujuan artikel ini adalah untuk memberi tahu orang lain dan saya sendiri tentang masa depan bagaimana saya mengkonfigurasi repositori proyek sedemikian rupa sehingga melindungi dirinya dari kode yang tidak valid dalam hal standar tim.

Apa yang kita miliki

Sebagai contoh, ambil proyek demo yang kodenya akan diposting di GitHub. Karena saya sedang mengembangkan .NET Core, proyek akan ditulis di atasnya. Apa yang akan saya gunakan:

• .NET Core 3.1
• 8 Sudut
• Akun Github
• Travis ci

Travis-CI. , .

— , master branch.

" " Gitlab Azure DevOps, Github — Travis CI.

. . , , :

• . develop master , (maintainer).
• . CICD , .
• Repository is a king. gitflow, .
• Fail fast. , .
• Git pre-commits hoocks. CI , - .

? -, master develop . , , , "" . " ". , .

solution- (*.sln) , - .NET . , , nuget- .

stylecop .NET Core. , solution- ( gist.github.com):

1. Directory.build.props — .
2. standard.ruleset — .
3. stylecop.json — .

, .

- . : - , . . :

#  
ng lint

#    ,    html-
ng build --prod

#  
ng test

. , (Chrome / Chromium), CI-. , npm- puppeteer , .

, , :

1. "test-headless-ci-only": "ng test --browsers ChromiumNoSandbox" scripts packages.json:

"scripts": {
    "ng": "ng",
    "start": "ng serve -o",
    "build": "ng build",
    "build-stage": "ng build --configuration=staging",
    "build-prod": "ng build --prod",
    "test": "ng test",
    "test-headless-ci-only": "ng test --browsers ChromiumNoSandbox",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

1. npm install puppeteer karma.conf.js :

const process = require("process");
process.env.CHROME_BIN = require("puppeteer").executablePath();

module.exports = function(config) {
  ...
};

1. karma.conf.js customLaunchers:

config.set({
....,
customLaunchers: {
      ChromiumNoSandbox: {
        base: "ChromeHeadless",
        flags: [
          "--no-sandbox",
          "--headless",
          "--disable-gpu",
          "--disable-translate",
          "--disable-extensions"
        ]
      }
    },
    singleRun: true
});

npm run est-headless-ci-only.

- , . prettierrc, . . prettierrc , :

1. prettier pretty-quick :

npm install -g prettier
npm install -g pretty-quick

1. .prettierrc -:

{
    "useTabs": false,
    "printWidth": 120,
    "tabWidth": 2,
    "singleQuote": true,
    "trailingComma": "none",
    "semi": true
}

1. prettier- .prettierignore -:

package.json
package-lock.json
tslint.json
tsconfig.json
browserslist
.gitkeep
favicon.ico
tsconfig.lib.json
tsconfig.app.json
tsconfig.spec.json
karma.conf.js
protractor.conf.js
ng-package.json
*.html

" " pretty-quick --staged.

-

CI/CD — , . , . . , -, .

husky. , :

1. husky

npm install -g husky

1. husk package.json :

"devDependencies": {
  ...
},
"husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged",
      "pre-push": "ng lint && ng test --browsers ChromiumNoSandbox"
    }
  }

: , , "".

Setelah langkah-langkah yang dijelaskan dalam artikel diambil, saya mendapatkan proyek yang "melindungi dirinya sendiri" dari kode yang tidak valid. Jelas bahwa Anda tidak dapat menyimpan produk dari bug dengan satu sintaks dan panduan gaya, tetapi bahkan hal-hal kecil ini membantu untuk mencapai kualitas kode yang lebih baik dan memungkinkan Anda untuk mendiskusikan solusi arsitektur untuk ulasan kode daripada memformat masalah.