用vue-cli3创建vue项目并配置VS Code自动代码格式化vue语法突出问题

在终端中运行以下命令：

Vue create xxx //xxx是项目的名称，如vue-project。然后，系统会提示我们选择默认预设或手动选择功能。使用向下箭头键，我们手动选择功能，然后按回车键。

然后，我们将看到一系列功能选项。使用向下箭头键，我们将向下移动并使用空格键选择所需的功能，然后按回车键。

交织器/格式化器是代码样式。我们将使用eslint pretier

我们将在保存时添加Lint的附加功能。

我们将选择一个单独的配置文件。

我们可以选择是否保存所有这些设置，并在下次生成项目时直接使用它们。这里不需要，选n就可以了。

如果要保存它，此设置将保存在。用户主目录。

这里我们选择npm作为包管理器。

创建项目后，cd进入项目的根目录，例如：cd vue-project。然后，运行命令：npm run serve在根目录下启动项目，然后打开浏览器：localhost:8080查看初始项目。

安装Vetur

此时，我们用VS Code打开这个项目。vue是灰色的，因为VS Code没有的语法亮点。vue文件。

所以我们需要安装插件Vetur来帮助我们。打开左边的插件市场。

然后搜索“Vetur”，在搜索结果中选择，点击“安装/安装”。然后单击重新加载/重新加载。

此时，我们的。vue文件突出显示。

此外，Vetur还有一些代码片段。我们在。vue文件并按回车键，这将自动用的骨架或支架填充文件。vue组件。

安装ESLint和更漂亮的

在扩展存储中，我们将搜索ESLint，然后继续安装。更漂亮是同一个步骤。安装后，我们将重新加载VS代码。

配置ESLint

将“plugin:printer/recommended”添加到我们项目根目录中的ESLintrc.js文件中，这将启用eslint中的Speclier支持。

module.exports={ root: true，env: { node: true }，extends ' :[' plugin : vue/essential '，' plugin : specified/推荐'，//我们添加了这一行' @ vue/specified ']，rules: { '无控制台' : process . ENV . node _ ENV==' production '？错误' : '关闭'，'无调试器' : process . ENV . node _ ENV===' production '？错误' : '关闭' }，解析器选项： {解析器：' babel-eslint'}}配置更漂亮的

我们还可以创建一个更漂亮的个人资料，并根据我们的个人风格或团队偏好添加一些特殊设置。

也创造。项目根目录中的prettierrc.js

模块。exports={singlequote: true，semi: false}这两个设置是将双引号转换为单引号，而不在末尾使用分号。

用户设置

为了进一步优化VS Code的开发体验，我们在用户设置中加入了一些配置。设置用户的首选项并输入settings.json文件。

首先，关闭Vetur的林挺函数并添加：

维特。验证。template' : false现在我们要告诉ESLint我们希望它验证哪些语言(vue、html和javascript)，并为每种语言将autoFix设置为true:

ESLint . validate ' :[{ ' language ' : ' vue '，' autoFix': true }，{ 'language': 'html '，' autoFix': true }，{'language' :' JavaScript '，' autofix' : true}]，然后设置ESLint autoFixOnSave。

eslint . autofixonssave ' : true，并将我们的编辑器本身设置为formatOnSave。

Editor.formatOnSave ' : true，到目前为止，我们的设置基本完成，当我们保存文件时，我们可以自动格式化代码。

摘要

以上是vue语法的亮点，用vue-cli3创建vue项目，配置边肖推出的VS Code自动代码格式化。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！