vscode 代码格式化总结

工欲善其事必先利其器,有一个完美的代码编辑工具,可以大幅提高编码效率,从团队的角度讲,也有利于促进团队的写作。我个人是个强迫症,看不得一点的不干净,于代码如是。在多人合作的项目中也会发现,每个人的编码风格和格式化工具不一样,拉下代码来还要重新格式化,看看哪里不对不说,还会弄出一些奇怪的问题。鉴于此,我研究了一段时间怎么统一代码风格,怎么做才能让代码自动格式化符合标准,怎么自动修复一些代码错误。答案是,eslint + prettier 可以完美做到,关于这个,网上有很多教程,我的配置如下:

{
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 100,
"editor.tabSize": 2,
"editor.wordWrap": "on",
"editor.wordWrapColumn": 120,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {

"source.fixAll.eslint": true

},
"editor.formatOnSave": false,
"prettier.semi": true,
"prettier.singleQuote": true,
"prettier.disableLanguages": ["vue"],
"editor.formatOnPaste": true,
"editor.autoIndent": "keep",
"search.followSymlinks": false,
"vetur.format.defaultFormatter.html": "prettyhtml",
"vetur.format.defaultFormatter.js": "prettier",
"eslint.validate": [

  "javascript",
  "javascriptreact",
  "html",
  "vue",

],
"eslint.format.enable": true,
}


自动格式化工具设置为 prettier, 配合 eslint 自动格式化,基本可以满足一般的代码风格配置。但是 vue 的格式化我们一般会用到 vetur, 因为某些原因,这会导致格式化时,单引号变为双引号, 这就很不舒服了,为了解决这个问题,需要添加以下配置:

"prettier.disableLanguages": [

"vue"

],


eslint 设置

"rules": {
"semi": [

"error",
"always"

],
"no-tabs": "off",
"no-console": "off"
},


此外,vetur 最新版因为增加了对 ts 的支持,模板中的属性变量会标红,这里需要设置 "vetur.experimental.templateInterpolationService" 为 false,方能解决

你可能感兴趣的:(前端,javascript,html5,代码编辑器)