一． 常用插件
- Vetur
該插件是vue文件基本語法的高亮插件般哼，在插件窗口中輸入vetur點擊安裝插件就行，裝好后點擊文件->首選項->設置 打開設置界面嗤详，在設置界面右側(cè)添加配置娱局。
包含格式化功能， Alt+Shift+F （格式化全文）泪漂，Ctrl+K Ctrl+F（格式化選中代碼廊营，兩個Ctrl需要同時按著）。
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
}
- Eslint
eslint智能錯誤檢測插件萝勤，在具體開發(fā)中作用很大露筒，能夠及時的幫我們發(fā)現(xiàn)錯誤。至于安裝敌卓，同樣打開插件擴展窗口輸入eslint點擊安裝插件慎式，裝好后也需要進行配置，在同vetur插件一樣的地方進行配置
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true // HTML自動修復假哎，
},
{
"language": "vue",
"autoFix": true // vue 自動修復
}
],
"eslint.autoFixOnSave": true // 文件保存時自動修復
- Path Intellisense
作用： 路徑自動填充 -
Git相關(guān)
擴展安裝 - 其他
HTML CSS Support css語法提示
HTML Snippets html標簽提示
JavaScript (ES6) snippets ES6語法快捷鍵支持
language-stylus stylus語法提示
Stylus stylus CSS語法提示-->主要支持vue文件下stylus
VS Color Picker color: #fff 自動提示
Vue 2 Snippets vue快捷鍵提示
VueHelper
vscode-icons 圖標
Debugger for Chrome 將斷點映射至chrome上
Markdown All in One
Open in Browser
AL Code Outline
主題：theme-Protectivecoloration
Atom One dark theme
Atom One Light theme
Macaroon theme
Massimo-theme
Parasol Theme
二．VS Code 升級新版版后瞬捕，默認僅僅支持英文
下載語言包插件輸入“Chinese” 鞍历，安裝插件 “Chinese (Simplified) Language Pack for Visual Studio Code”
Ctrl +Shift +P快捷鍵 輸入 “Configure Language” 配置本地語言
將local的值舵抹，設置為中文簡體“zh-cn”
三．Vue3.0的開發(fā)環(huán)境
安裝node.js最新版
這里安裝的是8.11.4版
更新npm至最新版
安裝node.js后， npm默認版本為： 6.1.0
使用npm install npm -g更新npm至最新版
安裝vs code
安裝過程就忽略了.
安裝@vue/cli
npm install -g @vue/cli
創(chuàng)建一個vue-demo-project工程
創(chuàng)建過程中默認配置（開箱即用）
打開工程
默認情況下劣砍， VS code是使用英文的惧蛹， 有需要的話， 大家也可自行修改為中文：
1.按下ctrl+p, 輸入: > Config, 選擇： “Configure Display Language"
將原先的：
修改為：
修改并保存后刑枝， 會提示安裝語言包香嗓， 安裝即可：
打開一個.vue的文件時， 會提示推薦安裝vetur插件装畅， 當然選擇安裝了靠娱。安裝成功后，會提示重啟vscode
Vetur支持.vue文件的語法高亮顯示掠兄，除了支持template模板以外像云，還支持大多數(shù)主流的前端開發(fā)腳本和插件，比如Sass和TypeScript等等
eslint
此時打開一個vue文件并編輯蚂夕， 保存時并不會自動進行格式化迅诬， 這里還需要安裝一些依賴和一些配置。
首先需要安裝eslint
npm install -g eslint
安裝vscode 插件eslint
安裝好vscode插件后婿牍， 執(zhí)行vscode如下命令：
此時會在終端執(zhí)行以下命令侈贷， 并按提示進行選擇：
d:\Project\vue-demo-project>node_modules.bin\eslint.cmd --init
? How would you like to configure ESLint? Answer questions about your style
? Which version of ECMAScript do you use? ES2015
? Are you using ES6 modules? Yes
? Where will your code run? Browser
? Do you use CommonJS? Yes
? Do you use JSX? Yes
? Do you use React? Yes
? What style of indentation do you use? Tabs
? What quotes do you use for strings? Double
? What line endings do you use? Windows
? Do you require semicolons? No
? What format do you want your config file to be in? JSON
The config that you've selected requires the following dependencies:
eslint-plugin-react@latest
Successfully created .eslintrc.json file in d:\Project\vue-demo-project
d:\Project\vue-demo-project>
完成以上動作后， 會在當前工程目錄下生成一個 .eslintrc.json文件
vs code中配置eslint保存時自動格式化
具體配置如下：
{
"files.autoSave": "off",
"files.autoSaveDelay": 1000,
"team.showWelcomeMessage": false,
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",{
"language": "vue",
"autoFix": true
},
"javascriptreact",
"html",
"vue"
],
"eslint.options": {
"plugins": ["html"]
},
//為了符合eslint的兩個空格間隔原則
"editor.tabSize": 2,
"eslint.enable": true
}
eslint相關(guān)問題
- eslint未生效
查看并檢查下eslint server是否啟動或報錯
若有出錯等脂， 一般會給出提示俏蛮， 按提示處理就好了撑蚌。 - 報錯： Expected linebreaks to be 'CRLF' but found 'LF'. (linebreak-style)
有時會出現(xiàn)報錯信息： Expected linebreaks to be 'CRLF' but found 'LF'. (linebreak-style)
不同的操作系統(tǒng)下，甚至是不同編輯器搏屑，不同工具處理過的文件可能都會導致?lián)Q行符的改變锨并。
如果實在找不出原因， 或者無法解決睬棚， 可以先關(guān)閉此項檢測第煮。
// 統(tǒng)一換行符，"\n" unix(for LF) and "\r\n" for windows(CRLF)抑党，默認unix
// off或0: 禁用規(guī)則
'linebreak-style': 'off' - 使用vue/cli 3.0 自定義配置項創(chuàng)建工程后, vscode中eslint無法自動修復格式的問題
原因: .eslintrc.js文件中缺少了配置, 如下圖所示, 添加右側(cè)紅框部分后, 添加依賴eslint-plugin-html后即可.
附上.eslintrc.js詳細備注
module.exports = {
// 默認情況下包警，ESLint會在所有父級組件中尋找配置文件，一直到根目錄底靠。ESLint一旦發(fā)現(xiàn)配置文件中有 "root": true害晦，它就會停止在父級目錄中尋找。
root: true,
// 對Babel解析器的包裝使其與 ESLint 兼容暑中。
parser: 'babel-eslint',
parserOptions: {
// 代碼是 ECMAScript 模塊
sourceType: 'module'
},
env: {
// 預定義的全局變量壹瘟，這里是瀏覽器環(huán)境
browser: true,
},
// 擴展一個流行的風格指南，即 eslint-config-standard
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
extends: 'standard',
// required to lint *.vue files
plugins: [
// 此插件用來識別.html 和 .vue文件中的js代碼
'html',
// standard風格的依賴包
"standard",
// standard風格的依賴包
"promise"
],
//配置的一些規(guī)則
'rules': {
// allow paren-less arrow functions
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
}
}
最終的.eslintrc.json文件內(nèi)容如下
{
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"indent": [
"error",
"tab"
],
"linebreak-style": "off",
"quotes": [
"error",
"double"
],
"semi": [
"error",
"never"
]
}
}
