VSCode - setting.json配置 - Prettier、Vetur格式化和ESLint检查_js 不能用vetur格式化吗_西半球

未知 02-07 526

vscode 前端最佳插件配置

格式化代码时用到的插件

ESLint（代码规范和错误检查工具，控制代码质量） Prettier（代码格式化工具） Vetur（识别 vue 文件） EditorConfig for VS Code（定义项目的编码规范，编辑器的行为会与.editorconfig 文件中定义的一致，并且其优先级比编辑器自身的设置要高，这在多人合作开发项目时十分有用而且必要） Syncing（同步你的 VS Code 配置，在另一台机器使用可以自动同步配置，不需要重新慢慢配了） Manta’s Stylus Supremacy（使得 stylus 格式化更好看）

一、ESLint检查与保存修复

如果项目使用ESLint，按以下设置保存自动修复飘红代码对 vscode >1.41.0生效 ESLint官网如果ESLint配置的完整，prettier加不加都可以，保存自动修复不合规代码

// -------------------- 配置eslint -------------------- //autoFixedOnSave 设置已废弃，采用如下新的设置，新版(>1.41.0)配置 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.format.enable": true, //autoFix默认开启，只需输入字符串数组即可 "eslint.validate": [ "javascript", "vue", "html", "javascriptreact", "vue-html" ], // -------------------- 配置eslint -------------------- 二、格式化vue文件不自动换行

1、vscode下载ESlint, Prettier, Vetur插件 2、打开vscode 选择文件->首选项->设置 3、搜索vetur.format.defaultFormatterOptions，之后在setting.json中编辑 4、ctrl + s 保存，设置默认Vetur 不足：vue中的js无法配置单双引号，句尾分号 settings.json：

// ---------------- 设置属性、js不自动换行 ---------------- "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "aligned-multiple" //当超出折行长度时，将属性进行垂直对齐 }, "prettyhtml": { "printWidth": 100,//每行100字符 "singleQuote": false,//单引号强制转双引号 "wrapAttributes": false, "sortAttributes": false } }, // 这个按用户自身习惯选择 "vetur.format.defaultFormatter.html": "js-beautify-html", // 让vue中的js按编辑器自带的ts格式进行格式化 "vetur.format.defaultFormatter.js": "vscode-typescript", // ---------------- 设置属性、js不自动换行 ----------------

三、Vetur格式化

Vetur配置主要针对vue文件，包含vue文件折行设置，句尾分号，key是否使用单引号，方法末尾是否加逗号进行的配置 vue文件设置默认格式化为Vetur 不足：vue中的js换行有点异常

// -------------------- vetur 配置 -------------------- // vue文件默认格式化工具：vetur "[vue]": { "editor.defaultFormatter": "octref.vetur" }, // 这个按用户自身习惯选择 "vetur.format.defaultFormatter.html": "js-beautify-html", // 让vue中的js按编辑器自带的ts格式进行格式化 // "vetur.format.defaultFormatter.js": "vscode-typescript", // 让vue中的js按prettier进行格式化用这个 "vetur.format.defaultFormatter.js": "prettier", "vetur.format.defaultFormatterOptions": { "js": "prettier", "js-beautify-html": { "wrap_attributes": "aligned-multiple" //当超出折行长度时，将属性进行垂直对齐 }, "prettyhtml": { "tabWidth": 4, // 会忽略vetur的tabSize配置 "printWidth": 100, //每行100字符 "singleQuote": true, //是否使用单引号 "semi": false, // 句尾是否加; "wrapAttributes": false, "sortAttributes": false }, //vue中的js生效 "prettier": { "semi": false, // 句尾是否加; "singleQuote": true, //是否使用单引号 "trailingComma": "none" //禁止随时添加逗号 } }, // -------------------- vetur 配置 -------------------- 三、Prettier格式化

因为vue使用Vetur配置，这里的prettier 单独配置主要针对js文件句尾分号，key是否使用单引号，方法末尾是否加逗号进行的配置发现设置不生效主要因为Prettier默认按.editorConfig配置为最高优先级 js文件设置默认格式化为Prettier

优先级 1、项目目录的.prettierrc文件，支持json和分号格式（其实还有很多种） 2、项目目录的.editorconfig文件（默认配置) 3、vscode的配置文件（也有好几个地方配置，包括vetur节点下面）

测试过程中发现一个插件可以不按以下配置直接对js文件格式化Prettier-Standard - JavaScript formatter

// -------------------- prettier 配置(以下配置主要针对.js) -------------------- "prettier.useEditorConfig": false, // 不使用editorConfig配置文件设置才生效 "prettier.semi": false, // 句尾是否加; "prettier.singleQuote": true, //是否使用单引号 "prettier.trailingComma": "none", //禁止随时添加逗号 // -------------------- prettier 配置 -------------------- 完整的setting.json { "workbench.iconTheme": "vscode-icons", // -------------------- 配置eslint -------------------- //autoFixedOnSave 设置已废弃，采用如下新的设置，新版(>1.41.0)配置 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.format.enable": true, //autoFix默认开启，只需输入字符串数组即可 "eslint.validate": [ "javascript", "vue", "html", "javascriptreact", "vue-html" ], // -------------------- 配置eslint -------------------- // 设置编辑器的默认格式化工具 "editor.defaultFormatter": "esbenp.prettier-vscode", "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[less]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, //方法括号之间插入空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": false, // -------------------- vetur 配置 -------------------- // vue文件默认格式化工具：vetur "[vue]": { "editor.defaultFormatter": "octref.vetur" }, // 这个按用户自身习惯选择 "vetur.format.defaultFormatter.html": "js-beautify-html", // 让vue中的js按编辑器自带的ts格式进行格式化 // "vetur.format.defaultFormatter.js": "vscode-typescript", // 让vue中的js按prettier进行格式化用这个 "vetur.format.defaultFormatter.js": "prettier", "vetur.format.defaultFormatterOptions": { "js": "prettier", "js-beautify-html": { "wrap_attributes": "aligned-multiple" //当超出折行长度时，将属性进行垂直对齐 }, "prettyhtml": { "tabWidth": 4, // 会忽略vetur的tabSize配置 "printWidth": 100, //每行100字符 "singleQuote": true, //是否使用单引号 "semi": false, // 句尾是否加; "wrapAttributes": false, "sortAttributes": false }, //vue中的js生效 "prettier": { "semi": false, // 句尾是否加; "singleQuote": true, //是否使用单引号 "trailingComma": "none" //禁止随时添加逗号 } }, // -------------------- vetur 配置 -------------------- // -------------------- koro1FileHeader 配置 -------------------- // 头部注释 "fileheader.customMade": { "Author": "AuthorName", "Date": "Do not edit", // 文件创建时间(不变) "LastEditors": "AuthorName", // 文件最后编辑者 "LastEditTime": "Do not edit", // 文件最后编辑时间 "Description": "" // "FilePath": "only file name", // 只有文件名 // "custom_string_obkoro1_copyright": "Copyright (C) ${now_year} AuthorName. All rights reserved.", // "custom_string_obkoro1_date": "Do not edit" // 不带Date前缀的时间 }, // 函数注释 "fileheader.cursorMode": { "description": "", //"custom_string_obkoro1": "", "param": "params", "return": "" }, // 插件配置项 "fileheader.configObj": { "createHeader": false, // 新建文件自动添加头部注释，默认打开 "autoAdd": false, // 保存自动添加头部注释，开启才能自动添加，默认开启 "openFunctionParamsCheck": true, //函数注释自动提取函数的参数，默认开启 "createFileTime": true, // 默认为此文件的创建时间，设为false更改为当前生成注释的时间 "dateFormat": "YYYY-MM-DD HH:mm:ss", // 默认时间格式，修改影响所有时间字段 // 自定义注释中的艾特和冒号： "atSymbol": ["@", "@"], // 所有文件的头部注释和函数注释的默认值 @ "colon": [": ", ": "] // 所有文件的头部注释和函数注释的默认值 : // 自定义特殊字段名，Date、LastEditTime、LastEditors、Description、FilePath // "specialOptions": { // "Date": "since", // "LastEditTime": "lastTime", // "LastEditors": "LastAuthor", // "Description": "message", // "FilePath": "文件相对于项目的路径" // } // 函数参数配置 // "functionParamsShape": "normal", // 正常 // "functionParamsShape": "no bracket", // 没有方括号 // "functionParamsShape": "no type", // 没有类型 // "functionParamsShape": [ "{", "}"], // 函数参数外形自定义，默认值 {} // "functionTypeSymbol": "*", // 参数没有类型时的默认值 * // 函数设置不添加参数和类型 {*} // "functionParamsShape": "no type", // 没有类型 // "functionTypeSymbol": "" // 参数没有类型时的默认值 * }, // -------------------- koro1FileHeader 配置 -------------------- // -------------------- prettier 配置(以下配置主要针对.js) -------------------- "prettier.useEditorConfig": false, // 不使用editorConfig配置文件设置才生效 "prettier.semi": false, // 句尾是否加; "prettier.singleQuote": true, //是否使用单引号 "prettier.trailingComma": "none", //禁止随时添加逗号 // -------------------- prettier 配置 -------------------- "git.confirmSync": false, "security.workspace.trust.untrustedFiles": "open" }