首页 > 其他分享> 文章详细

Vue项目代码格式化

2021-06-28 14:33:09 阅读：280 来源： 互联网

标签：Vue 格式化代码 prettier editor true eslint

在实际项目开发时，代码的可读性还是非常重要的，因此本文以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 保存时自动格式化代码）没有报错才能运行项目。

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

标签：Vue,格式化,代码,prettier,editor,true,eslint
来源： https://www.cnblogs.com/akei/p/14944324.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue项目代码格式化