【初学者专用】由于遇到问题，在使用VSCode格式化Django-html时进行了记录

2 年 ago
科, 颖
1 minute

首先

这篇文章总结了在Visual Studio Code中运行Django-html的格式化器（严格来说是不同的）时遇到的困难点等。

只从 Django-girls 这个网站上第一次看到，但看起来对于遇到「没有安装 ‘django-html’ 文件的格式化程序」的人来说有些困难。

Formatter 是什么？

编码时，易读性至关重要。

通过统一描述模式，可读性会提高，并且不仅仅能提高工作效率，还能促进团队之间的顺畅共享。同时，易读性也能提高士气的提升。

现在有一些称为代码格式化器的扩展可以自动帮助我们做这个。现在的世界真方便啊。

执行环境

    • Windows10 64bit

 

    Visual Studio Code v1.47.2

请注意。

由于流程本身相对简单，因此我先将试错过程中的我不知道机制是个什么鬼的部分先写下来。

    • VSCodeの内部にもjs-beautifyというフォーマッターがあり、実は結構これで色々できる。けど使用するスタイルを変更する機能がないので断念。

 

    • Extensionsとしてはprettierとかが有名。だけどhtml,css,jsとかに対応してる一方でDjango-htmlはこちらも非対応だった為断念。（settingうまく弄ればいけたかも？

beautifyはjs-beautifyで出来ない設定を可能にし、拡張性をもたらすアドオン。今回はこれを使用。

留意点として、Django-html用のformatterは、2020年7月現時点では存在しない(多分)。
今回はhtml扱いのなかで、Django-htmlをフォーマットしているため、Djangoテンプレートとの融和性は低め。なのですべてがきれいに整えられるわけではないことに注意。

引入流程

１．使用Ctrl+Shift+x键搜索并安装beautify插件。
tes.png
2. 使用Ctrl+逗号键打开“设置”，然后在右上角的.json文件中添加以下内容。
  "beautify.language": {
    "html": [
        "htm", "html", "django-html"
    ]
  }
保存并重新启动VSCode
在django-html中，选择要格式化的编辑范围按下Ctrl+K Ctrl+F，即可进行格式化。（若要整体格式化，则按下Shift + Alt + F）
结束。

我想的

起初，我花了大约一个小时检查设置，因为我的html文件没有被编码，感到非常沮丧。然而后来才发现，这只是一个初级的误解，我忘记了Django-html的格式化工具。好在，我通过这个经历学到了js-beautify和prettier的特点和区别，所以也算是一件好事吧。

在Django中使用beautify来对不同语言进行格式化，例如使用prettier来对js进行格式化可能会非常方便。

顺便提一下，在指定VSCode内置格式时，可以这么做↓

"editor.defaultFormatter": "vscode.html-language-features"

感谢您始终读到最后。

请参考以下网站

GitHub – 没有安装 ‘django-html’ 文件的文档格式化程序。＃65189
stackoverflow – 没有安装 ‘django-html’ 文件的文档格式化程序。
Beautify HookyQR – VisualStudio Marketplace
关于VSCode中的Django-html格式化程序

bannerAds