基于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 }