0%

VSCode写Vue代码保存时自动格式化

现在我们在开发项目的时候通常都是多人合作一起开发,所以保持代码的风格一致很重要,在前端团队中,一般都是遵循eslint规则进行代码的编写。下面以配置Vue项目为例,简单介绍下如何使用vscode自动帮我们对代码进行格式化。

安装ESLint插件

#文件-gt-首选项-gt-设置,找到拓展里的ESLint,勾上Always-show-status和Auto-fix-on-save文件 -> 首选项->设置,找到拓展里的ESLint,勾上Always show status和Auto fix on save

修改用户配置,使插件支持vue

点击上一步中的在settings.json中编辑,进入如下界面,右侧可编辑区内的红框框住的就是我们要对默认配置进行覆盖的:

当然,在项目根目录是需要一个.eslintrc.js文件的:

`module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "standard"],
  rules: {
    "no-tabs": "off",
    "indent": [1, 4],
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
  },
  parserOptions: {
    parser: "babel-eslint"
  }
};
`