安装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是使用英文的, 有需要的话, 大家也可自行修改为中文:
按下ctrl+p, 输入: > Config, 选择: “Configure Display Language"
image.png
将原先的:
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)
不同的操作系统下,甚至是不同编辑器,不同工具处理过的文件可能都会导致换行符的改变。
如果实在找不出原因, 或者无法解决, 可以先关闭此项检测。
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-standard15 // 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 }