VsCode編輯器

一、vscode代碼保存時自動格式化成 ESLint風格（支持VUE）   ：   http://www.ptbird.cn/vscode-autosave-eslint-support-vue.html

　  另，vscode中非webpack等一些構建工具項目，也可使用eslint風格。可是須要額外安裝eslint包，生成.eslintrc.*文件：  http://www.javashuo.com/article/p-ucjdjdtw-o.html（親測有效）

npm install eslint --save-dev

    項目目錄下建立一個 .eslintrc.* 的配置文件或 使用命令行（./node_modules/.bin/eslint --init，推薦這種方法）生成這個文件。具體規則能夠本身根據須要定製的  http://www.javashuo.com/article/p-twuvayej-gx.html。 

module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "sourceType": "module"
    },
    "rules": {
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "windows"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "never"
        ]
    }
};

View Code

　  重點：eslint包不依賴於webpack，依賴於node。node對項目結構沒有侵入性，只是在根目錄下生成一個 node_modules文件夾  和  package.json文件。eslint功能再添加一個配置文件。

　  注意：eslint能夠忽視指定某個或某類文件，建立 .eslintignore 文件進行配置。如：

/build/
/config/
/dist/
/static/js/*.js
/*.js

二、VSCODE編輯器經常使用插件推薦  ： https://blog.csdn.net/Che_rish/article/details/78893019

三、特殊功能 快捷方式：

　　a、 js 的註釋模板 （注意：新版的vscode已經原生支持,在function上一行輸入 /** tab）

四、vscode 調試node.js  ：http://www.javashuo.com/article/p-pmqhhlff-du.html

個人經常使用插件：

　　一、ESLint       配置： http://www.ptbird.cn/vscode-autosave-eslint-support-vue.html

　　二、Auto Close Tag

　　三、Auto Rename Tag

　　四、編輯器中文插件

　　五、View In Browser    文件協議打開

　　六、Live Server           本地服務器打開（這個服務器具備文件修改 自動刷新功能的。）

　　七、Path Intellisense   自動路勁補全

　　八、Bracket Pair Colorizer   讓括號擁有獨立的顏色，易於區分。能夠配合任意主題使用。

　　九、Vetur  vue文件的語法高亮

　　十、Todo Tree                                   http://www.cnblogs.com/qiezuimh/p/9549545.html

　　十一、TODO Highlight    突出顯示代碼中  TODO，FIXME 的註釋。（我的以爲能夠只用TODO來標記，由於兩個都是須要去改動代碼的，因此都是未完成狀態）

 

 

 

注意：vscode 中編輯器設置中有  用戶（就是全局設置） 和 工做區（只是對當前項目進行的設置，設置文件在.vscode文件夾內）兩種。