vscode创建uniapp,uniapp可以用vscode吗
在本文中，我将与您分享我使用vscode开发的一些配置。包括uniapp组件的语法提示，uniapp的代码提示，自动代码格式化。有兴趣用vscode开发uniapp的朋友来看看吧。
因为前端项目一直都是用vscode开发的，现在一些小程序或者h5项目都是用uniapp开发的。体验了一段时间hbuiler，还是觉得vscode很好闻。以下是我用vscode开发的一些配置。包括uniapp组件的语法提示、uniapp的代码提示和代码的自动格式化。
文件：https://ask.dcloud.net.cn/article/id-36286__page-2
1.安装vetur
首先我们需要安装vue插件vetur，这是vscode的基础VUE插件，可以安装在vscode扩展中。
2.安装eslint
在vscode中安装eslint扩展
3.配置vscode的setting.json
展开VSCode的设置，依次单击文件首选项设置，打开VSCode配置文件settings.json，添加以下配置
{
files.autoSave: off ，
eslint.validate: [
javascript ，
javascriptreact ，
vue-html ，
{
语言: vue ，
自动修复:真
}
],
eslint.run: onSave ，
editor.tabSize: 2，
editor.codeActionsOnSave: {
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.在项目中安装组件的语法提示
NPI @ dcloudio/uni-helper-json，如果你的package.json文件里已经安装了就不需要安装了。
此时，我们可以看到组件的语法提示。
6.vscode安装uniapp-snippet插件。
7.保存自动格式化代码。
大家可以看到，此时页面中的格式比较混乱，很难看，然后保存后也不会自动格式化，所以我们需要在项目中添加eslintvue add eslint。
让我们选择最后一个更漂亮的。
安装后，我们可以看到我们的项目中还有一些文件，我们可以自己配置eslintrc.js文件中的规则。
我们可以看到一些配置的js文件报告了错误，所以我们可以忽略这些文件开头和结尾的eslint检查。
比如postcss.config.js
/* eslint-disable */
const path=require( path )；
模块.导出={
解析器：require(postcss-comment )，
插件：[
需要( postcss-import)({
resolve(id，basedir，importOptions) {
if(id . starts with( ~ @/){
返回path . resolve(process . env . uni _ INPUT _ DIR，id . substr(3))；
} else if(id . starts with( @/){
返回path . resolve(process . env . uni _ INPUT _ DIR，id . substr(2))；
} else if (id.startsWith(/)！id . starts with(//){
返回path . resolve(process . env . uni _ INPUT _ DIR，id . substr(1))；
}
返回id；
},
}),
require(autoprefixer)({
移除：process.env.UNI_PLATFORM！==h5 ，
}),
require( @ dcloudio/vue-CLI-plugin-uni/packages/post CSS )，
],
};
/* eslint-disable */
其他配置好的js文件操作类似，这样配置好之后，我们保存的代码会自动格式化。
8.导入HBuilderX附带的代码块
从github下载uni-app代码块，并把它放在。项目目录下的vscode目录与HBuilderX具有相同的代码块。d代码块下载地址https://github.com/zhetengbiji/uniapp-snippets-vscode
关于用vscode开发uniapp的方法，本文到此结束。有关使用vscode开发uniapp的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。