基于VisualStudioCode搭建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.d --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,
"able": 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详细备注
// 默认情况下，ESLint会在所有⽗级组件中寻配置⽂件，⼀直到根⽬录。ESLint⼀旦发现配置⽂件中有 "root": true，它就会停⽌在⽗级⽬录中寻。 root: true,
// 对Babel解析器的包装使其与 ESLint 兼容。
parser: 'babel-eslint',
parserOptions: {
// 代码是 ECMAScript 模块
sourceType: 'module'
},
env: {
// 预定义的全局变量，这⾥是浏览器环境
browser: true,
},
// 扩展⼀个流⾏的风格指南，即 eslint-config-standard
// github/feross/standard/blob/master/RULES.md#javascript-standard-style
extends: 'standard',
// required to lint *.vue files
visual studio和vs code的区别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': v.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"
]
}
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论