在实际项目开发时，代码的可读性还是非常重要的，因此本文以Vue项目为例介绍代码格式化。

 

1.VSCode 中安装以下两个插件：
　　prettier-Code formatter
　　ESLint

 

2.在项目根目录下创建以下两个文件以及一个包含 settings.json 文件的.vscode 文件夹
　　.eslintrc.js
　　.prettierrc

　　.vscode
　　　　settings.json

 

项目结构示意图

 

 

 

3.然后在配置上述的三个文件

settings.json

{
    "editor.formatOnSave": true,//保存的时候是否自动格式化
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true//使用eslint进行修复（格式化）代码
    },
    "eslint.validate": [
        //检查格式化的文件类型
        "javascript",
        "javascriptreact",
        "html",
        "typescript",
        "vue",
        "less",
        "css",
        "scss"
    ],
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

 

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  plugins: ["prettier"],
  extends: ["plugin:vue/essential", "eslint:recommended", "plugin:prettier/recommended"],
  rules: {
    "no-console": "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    "prettier/prettier": "error"
  },
  globals: {
    //可以把全局的方法以及常量写在这里并设为true，这样通过代码的检验，eg:$
    $: true,
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: "module",
    parser: "babel-eslint"
  }
};

 

.prettierrc

{
    "printWidth": 150,
    "tabWidth": 2,
    "trailingComma": "none",
    "arrowParens": "avoid",
    "endOfLine": "auto",
    "jsxBracketSameLine": false,
    "htmlWhitespaceSensitivity": "ignore",
    "semi": true,
    "singleQuote": true,
    "bracketSpacing":true
}

 

4.完成上述步骤之后，如果出现项目打不开的情况，可以看下控制台输出的错误信息，大概率是一些npm的依赖包没下，这里提供本人在实现代码格式化时需要下载的依赖包仅供参考。

npm i eslint prettier-eslint eslint-config-prettier 　　若不能解决问题，还需各位根据自己的实际情况解决问题。  

 

5.该代码格式化的方案可能会出现的问题：

　　一、第4点提到的npm依赖包问题。

　　二、代码检查过于严格，可能需要将全部的代码格式化后（打开代码，ctrl + s 保存时自动格式化代码）没有报错才能运行项目。

　　三、本文提供的代码格式化配置可能不符合实际项目要求，因此具体的代码格式可以通过修改配置文件来实现。