我用vscode編輯代碼啦!

vscode安裝

下載安裝地址

常用插件

Visual Studio系列產(chǎn)品的擴展

修改設(shè)置

文件-->首選項-->設(shè)置
選擇工作區(qū)

1、One Dark Pro

主題

2、background

設(shè)置主題的背景 .


    {   "editor.fontFamily": "Comic Sans MS",
        "editor.fontWeight": "bold",
    //是否啟用background插件
        "background.enabled": true,
    // //是否使用默認(rèn)圖,選false的時候使用下面customImages中的地址
        "background.useDefault": false,
        "background.style": {
            "opacity": 0.15,
            "background-size":"cover"
        },
        "background.customImages": [
            //本地文件也可以是七牛云儲存的地址不知道地址的話,把圖片拖到瀏覽器里看
            "file:///C:/Users/Administrator/Desktop/demo/img/a.jpg",
            "file:///C:/Users/Administrator/Desktop/demo/img/vscode2.png",
            "file:///C:/Users/Administrator/Desktop/demo/img/vscode.jpg"
        ]
    }
demo

3、vscode-icon

讓 vscode 資源樹目錄加上圖標(biāo)

4、beautify

格式化代碼
使用方法:運行 F1 Beautify(美化選擇)或F1 Beautify file。

5、HTML Snippets

h5代碼片段提示

6、Path Intellisense

自動路徑補全

7、ESlint

ESlint接管原生js提示,可以自定制體會規(guī)則。

全局安裝eslint npm install -g eslint
然后先運行 eslint init
在運行 eslint --init

{
    "extends": "standard",

    "plugins": [
            // "react",
            "html"
    ],
    "env": {
            "node": true,
            "jquery": true,
            "es6": true,
            "browser": true
    },
    "globals": {
            "angular": false
    },
    <!-- more -->
    "parser": "babel-eslint",
    "rules": {
            //官方文檔 http://eslint.org/docs/rules/
            //參數(shù):0 關(guān)閉,1 警告,2 錯誤
            // "quotes": [0, "single"],                  //建議使用單引號
            // "no-inner-declarations": [0, "both"],     //不建議在{}代碼塊內(nèi)部聲明變量或函數(shù)
            "no-extra-boolean-cast": 1, //多余的感嘆號轉(zhuǎn)布爾型
            "no-extra-semi": 1, //多余的分號
            "no-extra-parens": 0, //多余的括號
            "no-empty": 1, //空代碼塊

            //使用前未定義
            "no-use-before-define": [
                    0,
                    "nofunc"
            ],

            "complexity": [0, 10], //圈復(fù)雜度大于*

            //定義數(shù)組或?qū)ο笞詈蠖嘤嗟亩禾?            "comma-dangle": [
                    0,
                    "never"
            ],

            // 不允許對全局變量賦值,如 window = 'abc'
            "no-global-assign": ["error", {
                    // 定義例外
                    // "exceptions": ["Object"]
            }],
            "no-var": 0, //用let或const替代var
            "no-const-assign": 2, //不允許const重新賦值
            "no-class-assign": 2, //不允許對class重新賦值
            "no-debugger": 1, //debugger 調(diào)試代碼未刪除
            "no-console": 0, //console 未刪除
            "no-constant-condition": 2, //常量作為條件
            "no-dupe-args": 2, //參數(shù)重復(fù)
            "no-dupe-keys": 2, //對象屬性重復(fù)
            "no-duplicate-case": 2, //case重復(fù)
            "no-empty-character-class": 2, //正則無法匹配任何值
            "no-invalid-regexp": 2, //無效的正則
            "no-func-assign": 2, //函數(shù)被賦值
            "valid-typeof": 1, //無效的類型判斷
            "no-unreachable": 2, //不可能執(zhí)行到的代碼
            "no-unexpected-multiline": 2, //行尾缺少分號可能導(dǎo)致一些意外情況
            "no-sparse-arrays": 1, //數(shù)組中多出逗號
            "no-shadow-restricted-names": 2, //關(guān)鍵詞與命名沖突
            "no-undef": 1, //變量未定義
            "no-unused-vars": 1, //變量定義后未使用
            "no-cond-assign": 2, //條件語句中禁止賦值操作
            "no-native-reassign": 2, //禁止覆蓋原生對象
            "no-mixed-spaces-and-tabs": 0,



            //代碼風(fēng)格優(yōu)化 --------------------------------------
            "no-irregular-whitespace": 0,
            "no-else-return": 0, //在else代碼塊中return,else是多余的
            "no-multi-spaces": 0, //不允許多個空格

            //object直接量建議寫法 : 后一個空格前面不留空格
            "key-spacing": [
                    0,
                    {
                            "beforeColon": false,
                            "afterColon": true
                    }
            ],

            "block-scoped-var": 1, //變量應(yīng)在外部上下文中聲明,不應(yīng)在{}代碼塊中
            "consistent-return": 1, //函數(shù)返回值可能是不同類型
            "accessor-pairs": 1, //object getter/setter方法需要成對出現(xiàn)

            //換行調(diào)用對象方法  點操作符應(yīng)寫在行首
            "dot-location": [
                    1,
                    "property"
            ],
            "no-lone-blocks": 1, //多余的{}嵌套
            "no-labels": 1, //無用的標(biāo)記
            "no-extend-native": 1, //禁止擴展原生對象
            "no-floating-decimal": 1, //浮點型需要寫全 禁止.1 或 2.寫法
            "no-loop-func": 1, //禁止在循環(huán)體中定義函數(shù)
            "no-new-func": 1, //禁止new Function(...) 寫法
            "no-self-compare": 1, //不允與自己比較作為條件
            "no-sequences": 1, //禁止可能導(dǎo)致結(jié)果不明確的逗號操作符
            "no-throw-literal": 1, //禁止拋出一個直接量 應(yīng)是Error對象

            //不允return時有賦值操作
            "no-return-assign": [
                    1,
                    "always"
            ],

            //不允許重復(fù)聲明
            "no-redeclare": [
                    1,
                    {
                            "builtinGlobals": true
                    }
            ],

            //不執(zhí)行的表達式
            "no-unused-expressions": [
                    0,
                    {
                            "allowShortCircuit": true,
                            "allowTernary": true
                    }
            ],
            "no-useless-call": 1, //無意義的函數(shù)call或apply
            "no-useless-concat": 1, //無意義的string concat
            "no-void": 1, //禁用void
            "no-with": 1, //禁用with
            "space-infix-ops": 0, //操作符前后空格

            //jsdoc
            "valid-jsdoc": [
                    0,
                    {
                            "requireParamDescription": true,
                            "requireReturnDescription": true
                    }
            ],

            //標(biāo)記未寫注釋
            "no-warning-comments": [
                    1,
                    {
                            "terms": [
                                    "todo",
                                    "fixme",
                                    "any other term"
                            ],
                            "location": "anywhere"
                    }
            ],
            "curly": 0 //if、else、while、for代碼塊用{}包圍
    }
}

eslint --init

8、Complete JSDoc Tags

js 注釋模板 /** 按tab鍵就可以啦

9、markdownlint

當(dāng)使用markdownlint編輯Markdown文件時,任何違反markdownlint規(guī)則(見下文)的行
將在編輯器中觸發(fā)警告。警告用波浪綠色下劃線表示,
也可以通過按下來Ctrl+Shift+M打開“錯誤和警告”對話框。

10、open in brower

右鍵單擊時,您可能會找到一個新項目“ open in other browsers”,
如果單擊它,您將獲得一個瀏覽器列表,然后您可以選擇一個打開此頁面。
當(dāng)然,也可以用快捷方式來獲取它 Alt+Shift+B.(與搜狗拼音快捷鍵沖突)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容