低格式j(luò)s代碼

本文以Vue項目作為演示。

在使用 幫助創(chuàng)建項目時，必須選擇它。 下載依賴后，使用 打開項目。

安裝插件，然后File->->（如果安裝的是英文插件包，應(yīng)該是File->->），搜索，點擊.json

在配置文件中添加以下選項

    "editor.codeActionsOnSave": {
        "source.fixAll": true,
    },

配置完成后，代碼會根據(jù)你當(dāng)前Vue項目下的..js文件的規(guī)則進(jìn)行校驗和低格式化。

PS：手動底層代碼在保存時手動觸發(fā)。 目前我試過js和vue文件中的js代碼，都沒有問題。 html和vue中的html和css無效。

如果要手動降級，需要在npm下載插件：

npm?i?-D tslint

在你的項目中配置好配置文件后，不能與配置文件共享，規(guī)則不同。

但是，我發(fā)現(xiàn)了一些缺陷，例如，很難手動縮進(jìn)，這可以通過 shift+alt+f 來實現(xiàn)。

擴張

雖然還是有辦法對vue文件中的html和css代碼進(jìn)行低格式化，但是借助內(nèi)置的低格式化sublime text 3 js代碼格式化，快捷鍵是shift+alt+f，假設(shè)你當(dāng)前打開的是一個vue文件，按shift+alt+f會提示你選擇低格規(guī)格。 如果沒有提示，說明已經(jīng)有默認(rèn)的low 規(guī)范（一般是vetur插件）。 之后vue文件中的所有代碼都會是低格式的，不過低格式規(guī)則也可以自己配置。 如右圖所示，您可以根據(jù)自己的喜好選擇低級別的規(guī)則。

因為之前已經(jīng)設(shè)置了低格式規(guī)則，所以vue文件只需要低格式html和css中的代碼，不需要低格式代碼。 我們可以這樣配置來嚴(yán)格禁止vetur低格式代碼：

然后再回到剛才的vue文件，把代碼的格式亂七八糟，然后按shift+alt+f，你會發(fā)現(xiàn)html和css里面的代碼已經(jīng)是low-了，但是code還不low -格式。 沒關(guān)系，因為低格已經(jīng)設(shè)置好了，所以只要保存，代碼也會手動低格。

同樣，其他類型的文件也可以通過這種方式設(shè)置低格式規(guī)范。

低格式CSS代碼

下載依賴

npm?install?--save-dev stylelint stylelint-config-standard

在項目根目錄新建..json文件，輸入以下內(nèi)容：

{
    "extends": "stylelint-config-standard"
}

添加插件

然后就可以看到效果了。

如果要更改插件的默認(rèn)規(guī)則，可以看官方文檔sublime text 3 js代碼格式化，里面提供了170條規(guī)則更改。 比如我想使用4個空格作為縮進(jìn)，可以這樣配置：

{
    "extends": "stylelint-config-standard",
    "rules": {
        "indentation": 4
    }
}

如有侵權(quán)請聯(lián)系刪除！