typescript - Javascript'te Prettier değişken tanımını bir sonraki satıra zorluyor

Typescript, prettier ve eslint kullanıyorum ve çok satırlı bir string değişkeni şu şekilde tanımlamaya çalışıyorum:

const text = 'Some really long interesting text' + 
    ' some more really really long text' +
    ' and some even more really long text';

Ancak, eslint'i fix seçeneği ile çalıştırdığımda, prettier kodumun bu şekilde görünmesini zorunlu kılıyor.

const text =
    'Some really long interesting text' +
    ' some more really long interesting text' +
    ' and some even more really long text';

Metinden önce + operatörlerinin olmasını tercih ederim ama prettier bunu kendi görüşü nedeniyle yapmama izin vermeyeceğini anlıyorum. Tamam. Ama sonraki satırda başlayan değişken tanımını anlamıyorum. Daha önce değişken tanımının sonraki satırda başladığını hiç görmemiştim.

Biri bana bu sorulardan herhangi birini cevaplamamda yardımcı olabilir mi:

1. Bu nereden geldi? Bu standardı daha önce hiç görmedim ve Prettier bunu nasıl benimsemeye karar verdi? Bu konudaki belgeler oldukça yetersiz.
2. Bunu geçersiz kılmanın bir yolu var mı?

İşte benim .eslintrc.js dosyam:

module.exports = {
    parser: '@typescript-eslint/parser',
    parserOptions: {
        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
        sourceType: 'module', // Allows for the use of imports
    },
    plugins: ['@typescript-eslint'],
    extends: [
        'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
        'plugin:prettier/recommended',
        'prettier/@typescript-eslint',
    ],
    rules: {
        // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
        // e.g. "@typescript-eslint/explicit-function-return-type": "off",
        '@typescript-eslint/ban-ts-comment': 'off'
    },
};

Ve işte benim .prettierrc.js dosyam:

module.exports = {
    semi: true,
    trailingComma: "es5",
    singleQuote: true,
    printWidth: 120,
    tabWidth: 4
};

Teşekkürler!

Cevap #1

Bunu değiştiremeyebilirsiniz, çünkü prettier eklentisi eslint ile çelişen tüm kurallarını devre dışı bırakır.

Bunun yerine prettier-eslint'i denemek isteyebilirsiniz. Önce kodu prettier ile biçimlendirir ve sonra eslint'e aktarır.

Bu, kodunuzu prettier ile biçimlendirir ve ardından bunun sonucunu eslint --fix'e geçirir. Bu şekilde, prettier'ın üstün biçimlendirme yeteneklerinden faydalanabilir, aynı zamanda eslint'in yapılandırma olanaklarından da yararlanabilirsiniz.

Eslint operator-linebreak kuralını ekleyin ve --fix işi halletmeli.

Kural

'operator-linebreak': ['error', 'before']

Bu nereden geldi? Bu standardı daha önce hiç görmemiştim ve Prettier bunu adopt etmeye nasıl karar verdi? Bununla ilgili belgeler oldukça yetersiz.

Bu bir standart değildir. Bu, Prettier'ın benimsediği bir stilidir. Satır sonları JavaScript'te kabul edilir. Satır sonları şu ana kadar yok sayılır.

• bir sonraki satır, mevcut satırı bozan bir kodla başladığında (kod birden fazla satırda ortaya çıkabilir)
• bir sonraki satır } ile başladığında, mevcut bloğu kapatmak
• kaynak kodu dosyasının sonuna gelindiğinde
• geri dönüş ifadesi kendi başına bir satırda olduğunda
• break ifadesi kendi satırında olduğunda
• kendi satırında bir throw ifadesi olduğunda
• kendi satırında bir continue ifadesi olduğunda

Kaynak: Javascript Otomatik Noktalı Virgüller

Ayrıca Neden Prettier'a Bakın