基於Visual Studio Code搭建Vue開發環境

安裝node.js最新版

這裏安裝的是8.11.4版

 

image.png

 

更新npm至最新版

安裝node.js後， npm默認版本爲： 6.1.0

 

image.png

使用 npm install npm -g更新npm至最新版

 

image.png

 

安裝vs code

安裝過程就忽略了.

安裝@vue/cli

> npm install -g @vue/cli

 

image.png

 

建立一個vue-demo-project工程

建立過程當中默認配置（開箱即用）

 

image.png

 

image.png

打開工程

 

image.png

默認狀況下， VS code是使用英文的， 有須要的話， 你們也可自行修改成中文：

1. 按下ctrl+p, 輸入: > Config, 選擇： 「Configure Display Language"
   
    

   

   image.png

2. 將原先的：

   
   
    

   

   image.png
   
   

   修改成：

   
   
    

   

   image.png

修改並保存後， 會提示安裝語言包， 安裝便可：

打開一個.vue的文件時， 會提示推薦安裝vetur插件， 固然選擇安裝了。安裝成功後，會提示重啓vscode

 

image.png

Vetur支持.vue文件的語法高亮顯示，除了支持template模板之外，還支持大多數主流的前端開發腳本和插件，好比Sass和TypeScript等等

eslint

此時打開一個vue文件並編輯， 保存時並不會自動進行格式化， 這裏還須要安裝一些依賴和一些配置。

 

image.png

首先須要安裝eslint

> npm install -g eslint

 

image.png

安裝vscode 插件eslint

安裝好vscode插件後， 執行vscode以下命令：

 

image.png

此時會在終端執行如下命令， 並按提示進行選擇：

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保存時自動格式化

具體配置以下：

 1 {
 2     "files.autoSave": "off",
 3     "files.autoSaveDelay": 1000,
 4     "team.showWelcomeMessage": false,
 5     "emmet.syntaxProfiles": {
 6       "vue-html": "html",
 7       "vue": "html"
 8     },
 9     
10     "eslint.autoFixOnSave": true,
11     "eslint.validate": [
12         "javascript",{
13             "language": "vue",
14             "autoFix": true
15         },    
16       "javascriptreact",
17       "html",
18       "vue"
19   ],
20   "eslint.options": {
21       "plugins": ["html"]
22   },
23      //爲了符合eslint的兩個空格間隔原則
24     "editor.tabSize": 2,
25     "eslint.enable": true
26 }

 

eslint相關問題

1. eslint未生效

查看並檢查下eslint server是否啓動或報錯

 

image.png

如有出錯， 通常會給出提示， 按提示處理就行了。

2. 報錯： Expected linebreaks to be 'CRLF' but found 'LF'. (linebreak-style)

有時會出現報錯信息： Expected linebreaks to be 'CRLF' but found 'LF'. (linebreak-style)

不一樣的操做系統下，甚至是不一樣編輯器，不一樣工具處理過的文件可能都會致使換行符的改變。
若是實在找不出緣由， 或者沒法解決， 能夠先關閉此項檢測。

// 統一換行符，"\n" unix(for LF) and "\r\n" for windows(CRLF)，默認unix
// off或0: 禁用規則
'linebreak-style': 'off'

3. 使用vue/cli 3.0 自定義配置項建立工程後, vscode中eslint沒法自動修復格式的問題

緣由: .eslintrc.js文件中缺乏了配置, 以下圖所示, 添加右側紅框部分後, 添加依賴eslint-plugin-html後便可.

 

image.png

 

附上.eslintrc.js詳細備註

 1 module.exports = {
 2     // 默認狀況下，ESLint會在全部父級組件中尋找配置文件，一直到根目錄。ESLint一旦發現配置文件中有   "root": true，它就會中止在父級目錄中尋找。
 3     root: true,
 4     // 對Babel解析器的包裝使其與 ESLint 兼容。
 5     parser: 'babel-eslint',
 6     parserOptions: {
 7         // 代碼是 ECMAScript 模塊
 8         sourceType: 'module'
 9     },
10     env: {
11         // 預約義的全局變量，這裏是瀏覽器環境
12         browser: true,
13     },
14     // 擴展一個流行的風格指南，即 eslint-config-standard
15     // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
16     extends: 'standard',
17     // required to lint *.vue files
18     plugins: [
19         // 此插件用來識別.html 和 .vue文件中的js代碼
20         'html',
21         // standard風格的依賴包
22         "standard",
23         // standard風格的依賴包
24         "promise"
25     ],
26     //配置的一些規則
27     'rules': {
28     // allow paren-less arrow functions
29     'arrow-parens': 0,
30     // allow async-await
31     'generator-star-spacing': 0,
32     // allow debugger during development
33     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
34     }
35 }

 

最終的.eslintrc.json文件內容以下

 1 {
 2     "env": {
 3         "browser": true,
 4         "commonjs": true,
 5         "es6": true
 6     },
 7     "extends": "eslint:recommended",
 8     "parserOptions": {
 9         "ecmaFeatures": {
10             "jsx": true
11         },
12         "ecmaVersion": 2018,
13         "sourceType": "module"
14     },
15     "plugins": [
16         "react"
17     ],
18     "rules": {
19         "indent": [
20             "error",
21             "tab"
22         ],
23         "linebreak-style": "off",
24         "quotes": [
25             "error",
26             "double"
27         ],
28         "semi": [
29             "error",
30             "never"
31         ]
32     }
33 }