VS Code在編寫JavaScript Class類的時候的bug

• 背景
• • 問題的表現
  • 解決方法（無恥）
  • 解決方法----更新插件
  • 嘗試一下自己解決（實際沒解決，時間緊迫的往下看）
  • 去源代碼中找找看
  • 到此完美解決

背景

這個問題是我在學習編寫nodejs express mssql的時候發現的

問題的表現

在使用vs code 編寫一個新的class（注意是javascript）的時候

class myClass {
    constructor() {
        this.a = "";
        this.b = "";
    }
}
           

一切正常，而且按下Ctrl+S的時候，它會自動幫我格式化，相當好。可是問題就出現在這裡----

當我想為myClass增加一個私有屬性的時候

javascript 私有屬性名稱必須以#開頭

根據這個要求編寫的時候

class myClass {
    #c
    constructor() {
        this.a = "";
        this.b = "";
    }
}
           

按下Ctrl+S，自動格式化開始工作，變成了

class myClass {#
    c
    constructor() {
        this.a = "";
        this.b = "";
    }
}
           

#号被自動格式化到頂上去了，XXXXXX

解決方法（無恥）

直接調出vs code 的插件管理，禁用了JS-CSS-HTML Formatter x.xx就ok了。

這樣就犧牲了Ctrl+S後優美的代碼格式化功能了。

解決方法----更新插件

竟然不能是最新的額！！！！（還是個4年前的版本）

嘗試一下自己解決（實際沒解決，時間緊迫的往下看）

1. vs code 按 F1 輸入 Formatter Config 調出 插件（JS-CSS-HTML Formatter x.xx）的配置檔案編輯
2. 打開後

{
    "onSave": true,
    "javascript": {
        "indent_size": 4,
        "indent_char": " ",
        "eol": "auto",
        "preserve_newlines": true,
        "break_chained_methods": false,
        "max_preserve_newlines": 0,
        "space_in_paren": false,
        "space_in_empty_paren": false,
        "jslint_happy": false,
        "space_after_anon_function": false,
        "keep_array_indentation": false,
        "space_before_conditional": true,
        "unescape_strings": false,
        "wrap_line_length": 0,
        "e4x": false,
        "end_with_newline": false,
        "comma_first": false,
        "brace_style": "collapse-preserve-inline"
    },
    "css": {
        "indent_size": 4,
        "indentCharacter": " ",
        "indent_char": " ",
        "selector_separator_newline": true,
        "end_with_newline": false,
        "newline_between_rules": true,
        "eol": "\n"
    },
    "html": {
        "indent_inner_html": false,
        "indent_size": 4,
        "indent_char": " ",
        "indent_character": " "
    }
}
           

基本不同是以然…也沒有關于#的字樣出現，應該這裡無法處理，放棄

去源代碼中找找看

vs code 所有的插件都存儲在 c:\users\使用者名.vscode\extensions目錄下

用vs code 打開目錄 c:\users\使用者名.vscode\extensions\lonefy.vscode-js-css-html-formatter-0.2.3

打開這個檔案，然後在編輯視窗CTRL+F搜尋 #（井号）

還好，結果并不很多，點選查下一個，挨個浏覽

到2216行，看上去很像哦

if (c === '#') {
                    if (tokens.length === 0 && input.peek() === '!') {
                        // shebang
                        resulting_string = c;
                        while (input.hasNext() && c !== '\n') {
                            c = input.next();
                            resulting_string += c;
                        }
                        return [trim(resulting_string) + '\n', 'TK_UNKNOWN'];
                    }
                    ...
                }
           

别貿然的更改，修改一下

我一般調試js都用console.log來…

if (c === '#') {
					console.log("測試一下");  //修改的内容在這裡
                    if (tokens.length === 0 && input.peek() === '!') {
                        // shebang
                        resulting_string = c;
                        while (input.hasNext() && c !== '\n') {
                            c = input.next();
                            resulting_string += c;
                        }
                        return [trim(resulting_string) + '\n', 'TK_UNKNOWN'];
                    }
                    ...
                }
           

重新開機vs code（插件修改了，必須重新開機）

重新開原來的項目

重新打開剛剛的類檔案

儲存一下

控制台出現如上内容，證明位置找對了

修改代碼吧…

在我将剛剛發現的代碼if節點全部注釋後，發現問題依舊。。。。。

唉！！！！！！

不過，總感覺不對，簡單修改一下

if (c === '#') {
					return [c,'TK_DOT'];  //修改的内容在這裡
                    if (tokens.length === 0 && input.peek() === '!') {
                        // shebang
                        resulting_string = c;
                        while (input.hasNext() && c !== '\n') {
                            c = input.next();
                            resulting_string += c;
                        }
                        return [trim(resulting_string) + '\n', 'TK_UNKNOWN'];
                    }
                    ...
                }
           

重新開機vs code

class myClass {
    #s
    constructor() {
        this.a = "";
        this.b = "";
    }
}
           

到此完美解決