vs配置html语言基础设置,VSCode 前端开发格式化配置

正文之前

作为开发，总是对代码风格有较高的追求，那就需要趁手的工具，这里介绍一下基于 VSCode 的代码风格管理插件。

文中插件及配置均基于 VSCODE，不作赘述。

基础配置

"editor.tabSize": 2,

"editor.wordWrap": "on"

使用 Prettier 进行格式化

作为前端开发，而且有工程需要团队协作开发的时候，代码格式化一直是个复杂的问题。之前也使用过的 Beautify 等插件，但是效果也不太理想，而 Prettier 的出现基本解决了此问题，详细配置如下：

"[html]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

},

"[javascript]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

},

"[json]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

},

"[jsonc]": {

"editor.defaultFormatter": "vscode.json-language-features"

},

"[typescript]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

}

上面配置完成后，格式化 javascript 代码时会发现默认是双引号，所以修改引号规则为单引号

"prettier.singleQuote": true

使用 Eslint 检测代码风格

有了代码格式化，日常开发还可以配合代码风格实时检测工具，会使得开发效率和代码质量有显著提升。所以再贴下 eslint 的配置。

// "eslint.autoFixOnSave": true, // 全局自动修复配置

// eslint 实时检查语言列表

"eslint.validate": [

"javascript",

"javascriptreact",

{

"language": "vue",

// "autoFix": true // 针对语言的自动修复配置

},

"typescript",

"typescriptreact",

"html"

],

// "eslint.alwaysShowStatus": true,

对 Vue 格式化

以上为基本配置，笔者目前使用的框架是 Vue，再贴下对应的配置。

"[vue]": {

"editor.defaultFormatter": "octref.vetur"

},

// ---------- vetur ----------

"vetur.format.defaultFormatter.html": "prettyhtml",

"vetur.format.defaultFormatter.css": "prettier",

"vetur.format.defaultFormatter.postcss": "prettier",

"vetur.format.defaultFormatter.scss": "prettier",

"vetur.format.defaultFormatter.less": "prettier",

"vetur.format.defaultFormatter.stylus": "stylus-supremacy",

"vetur.format.defaultFormatter.js": "prettier",

"vetur.format.defaultFormatter.ts": "prettier",

"vetur.format.defaultFormatterOptions": {

"js-beautify-html": {

"wrap_attributes": "preserve-aligned"

},

"prettyhtml": {

"singleQuote": false,

"sortAttributes": false,

},

"prettier": {

"singleQuote": true,

"printWidth": 200

}

}