网站开发流程管理,xampp php网站模板,网站与平台的区别,WordPress强制ssl证书错误一、插件的介绍与安装 1、Vetur插件 Vetur是一款Vue代码高亮显示的一款插件#xff0c;在没有使用此插件前#xff0c;以 .vue的文件名代码是没有颜色的#xff01;#xff01;#xff01;
安装步骤#xff1a;在扩展商店中搜索#xff08; Vetur #xff09;点击安装…一、插件的介绍与安装 1、Vetur插件 Vetur是一款Vue代码高亮显示的一款插件在没有使用此插件前以 .vue的文件名代码是没有颜色的
安装步骤在扩展商店中搜索 Vetur 点击安装
2、ESLint插件 ESLint插件主要用来检测代码的语法格式以便我们规范书写避免因编译所发生的错误 。
安装步骤在扩展商店中搜索 ESLint 点击安装
3、Prettier - Code formatter插件 该插件主要用于格式化代码 在在扩展商店中搜索 Prettier - Code formatter 点击安装 二、相关文件配置 1、在安装完以上插件后进入Vs Code设置面板 2、点击按钮打开json文件 3、复制以下代码片段 注意代码要粘贴在原来配置对象里面追加如下配置代码注意格式
{ editor.fontSize: 17, //编辑器字体大小 [scss]: { editor.defaultFormatter: michelemelluso.code-beautifier }, //scss格式化工具 workbench.iconTheme: vscode-icons, //vscode文件图标主题 terminal.integrated.shell.windows: C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe, //默认终端shell go.formatTool: goimports, //golang格式化工具 editor.defaultFormatter: esbenp.prettier-vscode, //编辑器格式化工具 [javascript]: { editor.defaultFormatter: rvest.vs-code-prettier-eslint }, //javascript格式化工具 [vue]: { editor.defaultFormatter: octref.vetur }, //vue格式化工具 editor.insertSpaces: false, workbench.editor.enablePreview: false, //打开文件不覆盖 search.followSymlinks: false, //关闭快速预览 files.autoSave: off, //编辑自动保存afterDelay editor.lineNumbers: on, //开启行数提示 editor.quickSuggestions: { //开启自动显示建议 other: true, comments: true, strings: true }, editor.tabSize: 4, //制表符符号eslint editor.formatOnSave: true, //每次保存自动格式化 // eslint.codeActionsOnSave: { // source.fixAll.eslint: true // }, prettier.eslintIntegration: true, //让prettier使用eslint的代码格式进行校验 prettier.semi: true, //去掉代码结尾的分号 prettier.singleQuote: false, //使用单引号替代双引号 javascript.format.insertSpaceBeforeFunctionParenthesis: true, //让函数(名)和后面的括号之间加个空格 vetur.format.defaultFormatter.html: js-beautify-html, //格式化.vue中html vetur.format.defaultFormatter.js: vscode-typescript, //让vue中的js按编辑器自带的ts格式进行格式化 vetur.format.defaultFormatterOptions: { js-beautify-html: { wrap_attributes: force-aligned //属性强制折行对齐 }, prettier: { semi: false, singleQuote: true }, vscode-typescript: { semi: false, singleQuote: true } }, eslint.validate: [ vue, javascript, typescript, typescriptreact, html ], editor.codeActionsOnSave: { source.fixAll.eslint: true }, files.associations: { *.cjson: jsonc, *.wxss: css, *.wxs: javascript }, emmet.includeLanguages: { wxml: html }, minapp-vscode.disableAutoConfig: true, vetur.ignoreProjectWarning: true, git.autorefresh: false, git.enabled: false, typescript.preferences.quoteStyle: single, editor.tabSize: 4, [typescript]: { editor.defaultFormatter: esbenp.prettier-vscode }, prettier.requireConfig: false, prettier.singleQuote: true, editor.formatOnSave: true, editor.detectIndentation: false, editor.formatOnSave: true, files.associations: { } } 三、注意 配置好之后如果Vs Code右下角提示ESLint被禁用点击一下然后选择 allowEverywhere
