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

具體配置如下：

{
    "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相關問題

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詳細備注

module.exports = {
    // 默認情況下，ESLint會在所有父級組件中尋找配置文件，一直到根目錄。ESLint一旦發現配置文件中有   "root": true，它就會停止在父級目錄中尋找。
    root: true,
    // 對Babel解析器的包裝使其與 ESLint 兼容。
    parser: 'babel-eslint',
    parserOptions: {
        // 代碼是 ECMAScript 模塊
        sourceType: 'module'
    },
    env: {
        // 預定義的全局變量，這里是瀏覽器環境
        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"
    ],
    //配置的一些規則
    '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文件內容如下

{
    "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"
        ]
    }
}