vscode 遵循 ESLint 格式化代码(vue)

2,775 阅读1分钟

ESlint 是个好东西,谁用谁说好

我们开发代码,多人维护,需要大家风格统一,这样代码维护方便,整洁清爽

针对于不同项目我们在工程中新建 .vscode文件夹

文件夹中新建文件 settings.json

输入以下内容

{
  "eslint.autoFixOnSave": true,
  // #这个按用户自身习惯选择
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  // eslint 检测文件类型
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  // vetur 的自定义设置
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "singleQuote": true,
      "semi": false
    }
  }
}

然后全局 settings.json 中输入以下内容

{
    "editor.tabSize": 2,
    "editor.formatOnSave": true,
    // 100 列后换行
    "editor.wordWrapColumn": 100,
    "editor.renderControlCharacters": true,
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
}

此时效果: 只需要写完代码就换页面,不用管代码,会自动保存并且将代码格式化, 分享给团队,共同风格,非常舒服