Bagaimana cara membuat VS Code untuk memperlakukan ekstensi file lainnya sebagai bahasa tertentu?

333

Atau adakah cara untuk mengganti bahasa file saat ini untuk menggunakan fitur highlight sintaks?

Misalnya, *.jsxsebenarnya menggunakan JavaScript tetapi VS Code tidak mengenalinya.

John Deev
sumber

Jawaban:

501

Dalam Visual Studio Code , Anda bisa menambahkan asosiasi file persisten untuk menyoroti bahasa ke settings.jsonfile Anda seperti ini:

// Place your settings in this file to overwrite the default settings
{
  "some_setting": custom_value,
  ...

  "files.associations": {
    "*.thor": "ruby",
    "*.jsx": "javascript",
    "Jenkinsfile*": "groovy"
  }
}

Anda dapat menggunakan Ctrl+ Shift+ plalu mengetik settings JSON. Pilih Preferensi: Buka Pengaturan (JSON) untuk membuka settings.json.

The Files: Associationsfitur pertama kali diperkenalkan pada Visual Studio Kode versi 1.0 (Maret 2016). Periksa pola wildcard yang tersedia di catatan rilis dan string bahasa yang dikenal dalam dokumentasi.

Josien
sumber
6
Nilai untuk asosiasi harus berupa ID bahasa / plugin, bukan nama. Misalnya plugin VBScript yang saya instal, ID adalah vbs. "* .vms": "vbs" mendapat ekstensi khusus untuk dikaitkan dengan benar.
Matt Merrill
Baru saja menghadapi masalah serupa. Jika menambahkan asosiasi file tampaknya tidak berfungsi, pastikan Anda tidak .editorconfigmenutup file, atau menyelaraskan konfigurasi antara VSCode dan .editorconfig, yang terakhir akan diutamakan
RecuencoJones
Anda juga dapat menempatkan pengaturan ini dalam ${projectdir}/.vscode/settings.jsonfile spesifik proyek .
Jason
108

Tahan Ctrl + Shift + P (atau cmd pada Mac), pilih "Ubah Bahasa Mode" dan itu dia.

Tetapi saya masih belum menemukan cara untuk membuat file VS Code dikenali dengan ekstensi spesifik karena beberapa bahasa tertentu.

John Deev
sumber
3
Tampaknya ada jalan pintas langsung ke Change Language Mode; Alt+K, M
Stafford Williams
Cmd+K, Muntuk Mac.
GreeKatrina
Ini sangat mungkin. Lihat jawaban saya di bawah ini: stackoverflow.com/a/51228725/3307796
JoelAZ
69

Cara termudah yang saya temukan untuk asosiasi global adalah dengan ctrl + km (atau ctrl + shift + p dan ketik "ubah bahasa mode") dengan file jenis yang Anda asosiasikan terbuka.

Pada pilihan pertama akan "Konfigurasikan Asosiasi File untuk 'x'" (apa pun tipe file - lihat gambar terlampir) Memilih ini membuat asosiasi tipe file permanen

masukkan deskripsi gambar di sini

Ini mungkin telah berubah (mungkin memang) sejak pertanyaan asli dan jawaban yang diterima (dan saya tidak tahu kapan itu berubah) tetapi itu jauh lebih mudah daripada langkah-langkah pengeditan manual dalam menerima dan beberapa jawaban lain, dan benar-benar menghindari memiliki untuk muss dengan ID yang mungkin tidak jelas.

JoelAZ
sumber
2
Terima kasih - ini berhasil untuk saya. Tidak jelas kapan mengedit settings.jsonfile secara manual apa ID ekstensi seharusnya, tetapi metode ini mengurutkannya!
ccbunney
1
Anda disambut @ccbunney, senang bisa membantu. Itu persis masalah yang sama yang saya miliki - dan saya tidak pernah menemukan ID ekstensi yang saya butuhkan, lol. Ngomong-ngomong, saya sangat senang menemukan solusi ini untuk diri saya dan itu keren karena membantu ppl lainnya! : D
JoelAZ
33

misalnya:

// .vscode/settings.json in workspace

{
  "files.associations": {
    "*Container.js": "javascriptreact",
    "**/components/*/*.js": "javascriptreact",
    "**/config/routes.js": "javascriptreact"
  }
}
B. Ma
sumber
1
Bagus. Ini berguna jika Anda memiliki ekstensi yang sama, tetapi parser bahasa berbeda berdasarkan path. Misalnya Anda dapat memiliki yml untuk menangani saluran pipa Concourse di satu folder dan file Ansible di folder lain.
Christian Maslen
Saya akan memilih ini dua kali jika saya bisa. Sudah mencoba untuk mempertahankan sintaks untuk tata letak dan parsial Nanoc saya dengan ekstensi .html, ini menyelesaikannya: "**/layouts/**/*.html": "erb"- perlu dicatat bahwa dropdown "mode bahasa" VSCode menunjukkan nama sebenarnya dari stabilo sintaks di kurung misalnyaRuby ERB (erb)
Dave Everitt
18

Ini bekerja untuk saya.

masukkan deskripsi gambar di sini

{
"files.associations": {"*.bitesize": "yaml"}
 }
Isura Amarasinghe
sumber
12

Ini, misalnya, akan membuat file berakhir .variablesdan .overridesdiperlakukan sama seperti file KURANG lainnya. Dalam hal pewarnaan kode, dalam hal pemformatan (otomatis). Tetapkan dalam pengaturan pengguna atau pengaturan proyek, yang Anda inginkan.

(UI semantik menggunakan ekstensi aneh ini, jika Anda penasaran)

Frank Nocke
sumber
8

Mengikuti langkah-langkah di https://code.visualstudio.com/docs/customization/colorizer#_common-questions bekerja dengan baik untuk saya:

Untuk memperluas colorizer yang ada, Anda akan membuat package.json sederhana di folder baru di bawah .vscode / extensions dan memberikan atribut extensionDependencies yang menentukan kustomisasi yang ingin Anda tambahkan. Pada contoh di bawah ini, ekstensi .mmd ditambahkan ke colorizer markdown. Perhatikan bahwa nama extensionDependency tidak hanya harus sesuai dengan kustomisasi tetapi juga id bahasa harus cocok dengan id bahasa dari colorizer yang Anda perluas.

{
    "name": "MyMarkdown",
    "version": "0.0.1",
    "engines": {
        "vscode": "0.10.x"
    },
    "publisher": "none",
    "extensionDependencies": [
        "markdown"
    ],
    "contributes": {
        "languages": [{
            "id": "markdown",
            "aliases": ["mmd"],
            "extensions": [".mmd"]
        }]
    }
}
MicMro
sumber
5

Saya telah mengikuti pendekatan yang berbeda untuk menyelesaikan masalah yang hampir sama, dalam kasus saya, saya membuat ekstensi baru yang menambahkan sintaks PHP yang menyoroti dukungan untuk file Drupal-spesifik (seperti .module dan .inc): https: // github. com / mastazi / VS-code-drupal

Seperti yang dapat Anda lihat dalam kode, saya membuat ekstensi baru daripada mengubah ekstensi PHP yang ada. Jelas saya menyatakan ketergantungan pada ekstensi PHP di ekstensi Drupal.

Keuntungan melakukannya dengan cara ini adalah jika ada pembaruan untuk ekstensi PHP, dukungan khusus saya untuk Drupal tidak hilang dalam proses pembaruan.

mastazi
sumber