使⽤vscode开发uniapp的⽅法
因为之前⼀直都是使⽤vscode开发前端项⽬，现在有⼀些⼩程序或者h5项⽬采⽤uniapp开发，在体验了⼀段时间hbuiler之后，还是觉得vscode⾹，以下分享我使⽤vscode开发的⼀些配置。其中包括uniapp组件语法提⽰，uniapp代码提⽰，代码⾃动格式化。
1. 安装vetur
⾸先我们需要安装vscode基本的vue插件vetur，在vscode扩展程序中即可安装
2. 安装eslint
在vscode中安装eslint扩展
3. 配置vscode的setting.json
VSCode进⾏扩展设置，依次点击⽂件 > ⾸选项 > 设置打开 VSCode 配置⽂件settings.json，添加如下配置
{
flutter uniapp 哪个好
"files.autoSave": "off",
"eslint.validate": [
"javascript",
"javascriptreact",
"vue-html",
{
"language": "vue",
"autoFix": true
}
],
"eslint.run": "onSave",
"editor.tabSize": 2,
"deActionsOnSave": {
"source.fixAll.eslint": true
}
}
⾃动格式化vue的项⽬也是如此，以上是部分配置，不要把原有配置删掉了
注意
不同版本的vscode配置可能有些许区别，如果哪个配置有问题，vscode会有提⽰
4. 使⽤vue-cli创建⼀个uniapp项⽬。
需要保证你已经全局安装vue-cli，没有的话先安装vue-cli
vue create -p dcloudio/uni-preset-vue my-project
我们先选择默认模版（Typescript）当然也可以选择其他模板
安装完成之后我们⽤vscode打开刚刚创建的项⽬。
5. 在项⽬中安装组件语法提⽰
npm i @dcloudio/uni-helper-json，如果你的package.json⽂件中已经安装了的话就不需要安装
此时我们可以看到组件的语法提⽰
6. vscode安装uniapp-snippet插件
7. 保存⾃动格式化代码
可以看到此时页⾯中的格式⽐较混乱，看着很难受，然后保存也并不会⾃动格式化，所以我们需要给项⽬添加eslint vue add eslint
我们选择最后⼀个prettier
安装完成之后我们可以看到我们的项⽬多了⼀些⽂件，可以⾃⾏在.eslintrc.js⽂件配置规则
我们可以看到⼀些配置的js⽂件报错了，我们在这些⽂件⾸尾忽略eslint检查即可⽐如fig.js
/* eslint-disable */
const path = require("path");
parser: require("postcss-comment"),
plugins: [
require("postcss-import")({
resolve(id, basedir, importOptions) {
if (id.startsWith("~@/")) {
v.UNI_INPUT_DIR, id.substr(3));
} else if (id.startsWith("@/")) {
v.UNI_INPUT_DIR, id.substr(2));
} else if (id.startsWith("/") && !id.startsWith("//")) {
v.UNI_INPUT_DIR, id.substr(1));
}
return id;
},
}),
require("autoprefixer")({
remove: v.UNI_PLATFORM !== "h5",
}),
require("@dcloudio/vue-cli-plugin-uni/packages/postcss"),
],
};
/* eslint-disable */
其他配置的js⽂件也类似操作这样配置完之后我们保存代码就会⾃动格式化了
8. 导⼊ HBuilderX ⾃带的代码块
到此这篇关于使⽤vscode 开发uniapp的⽅法的⽂章就介绍到这了，更多相关vscode 开发uniapp内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。