uni-app使用vscode开发的配置以及保存时代码自动格式化和eslint语法检查
uni-app官网已经给出如何使用vscode来开发uni-app,请戳>当 uni-app 遇见 vscode,假设已经按官方给的步骤初始化了项目,接下来,我们来配置如何在保存的时候代码自动格式化和eslint语法检查。
相关文档
安装vscode相关插件
- ESlint
- Prettier
- Vetur
- Prettier ESLint
Vetur 设置里的需要修改
- 首选项 -> 设置 -> 搜索
Vetur
这里设置除 prettyhtml
以外的其他选项,当时我配置的时候遇到一个问题,忘记是什么问题了,只记得这里需配置一下
如果 .vue 文件里面的格式和 .js 的文件格式不统一的话,这里不要勾选
创建vscode配置文件
首先在项目根目录建一个文件夹 .vscode
,然后建一个 settings.json
的文件
可能与你原来的设置有重复的项目,按照你自己需要选择即可
{
... // 其他配置代码
"editor.formatOnSave": true, // 保存时候自动格式化
// eslint自动格式化代码详细配置说明:https://www.worldlink.com.cn/en/osdir/vscode-eslint.html
"editor.codeActionsOnSave": {
// For ESLint
"source.fixAll.eslint": true,
// For TSLint
"source.fixAll.tslint": true,
// For Stylelint
"source.fixAll.stylelint": true
},
"prettier.printWidth": 140, // 超过最大值换行
"prettier.singleQuote": true, // 使用单引号代替双引号
"prettier.semi": false, // 句尾添加分号
"prettier.arrowParens": "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid:省略括号
"prettier.trailingComma": "none" // 在对象或数组最后一个元素后面是否加逗号(在ES5中加尾逗号)
}
安装项目所需要的依赖
yarn add
或 npm i
我这里用 yarn
这里你也可以根据你自己需要删减
yarn add babel-eslint eslint eslint-config-standard eslint-config-vue eslint-plugin-html eslint-plugin-prettier eslint-plugin-prettier-vue eslint-plugin-standard eslint-plugin-vue prettier prettier-eslint prettier-standard -D
配置 .eslintrc
{
"extends": [
"vue",
"standard",
"eslint:recommended",
"plugin:prettier/recommended",
"plugin:vue/recommended",
"prettier",
"prettier/vue",
"prettier/babel",
"prettier/standard"
],
"globals": {},
"plugins": ["vue", "babel"],
"env": {
"es6": true,
"browser": true,
"node": true
},
"rules": {
"no-console": "off",
"no-debugger": "off",
"no-unused-vars": 0,
"prettier/prettier": [
"error",
{
"singleQuote": true,
"parser": "flow",
"semi": false,
"arrowParens": "avoid",
"printWidth": 140,
"trailingComma": "none"
}
]
},
"parserOptions": {
"parser": "babel-eslint",
"ecmaVersion": 7,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"experimentalObjectRestSpread": true
}
}
}
到此就配置完了,如有更好的方法,欢迎讨论,互相学习。