您现在的位置是：首页 >技术杂谈 >vue使用prettier和eslint实现项目代码规范化管理网站首页技术杂谈

使用插件

在vscode中，搜索插件Prettier然后进行安装，安装完成后，此时右键格式化文档，就会有选项可以选择format document with然后选择对文档格式化的方法。此时可以看到选项 prettier -code formatter。
格式化是有默认的格式化方式的，此时已经可用。

自定义方法

在根目录新建文件prettier.config.js,然后输入一些适合自己或团队的开发习惯，比如：

module.exports = {
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: true,
  quoteProps: 'as-needed',
  bracketSpacing: true,
  trailingComma: 'none',
  jsxSingleQuote: false,
  arrowParens: 'always',
  insertPragma: false,
  requirePragma: false,
  proseWrap: 'never',
  htmlWhitespaceSensitivity: 'strict',
  endOfLine: 'auto'
};

如果此时你没有安装prettier，可能会报错 Cannot find module 'prettier'，这个是因为没有安装prettier，直接使用npm 安装即可。
现在我们再进行格式化的时候，会提示检测到了本地的配置文件，然后依据你本地的配置文件进行格式化，这里不解释具体的配置含义，至此，完成了简单的自定义代码格式化功能。

配置eslint

vue-cli 默认安装了eslint，在package.json中也帮忙做出了基本的eslint配置，大概如下：

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {
    }
  },

上述配置也直接导致了.eslintrc.js中的配置无效，因为package.json中的优先级是大于eslintrcjs的。
由于一些项目编译时间过长，所以我们更希望在编写代码时就能自动完成eslint检测，而不是编译完成后才开始报错，所以需要安装VSCODE的插件，在插件市场搜索eslint，安装即可。
小贴士：部分情况下eslint检测并不会根据配置的.eslintrc.js进行，这个也是因为package.json中的配置优先级较高，导致eslint插件没有办法正常运行，因为eslint插件和.eslintrc.js是配套工作的，此时删除掉package.json中的内容就可以正常工作了。
配置eslintrc.js

module.exports = {
  // 指定脚本的运行环境， env 关键字指定你想启用的环境，并设置它们为 true
  env: {
    browser: true,
    es6: true,
    node: true
  },
  // 扩展配置文件（设置当前ESLint默认继承的规则（或者你也可以使用标准规则：standard））
  // 一个配置文件一旦扩展，就可以继承另一个配置文件的所有特征（包括规则、插件和语言选项）、并修改所有选项
  extends: [
    'eslint:recommended', // 使用ESLint推荐的规则
    'plugin:vue/essential',
    'plugin:prettier/recommended' // 样式上eslint和prettier冲突，以prettier为准
  ],
  globals: {
    //  脚本在执行期间访问的额外的全局变量
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly'
  },
  // 解析器选项。sourceType用来指定js导入的方式，默认是script，此处设置为module，指某块导入方式
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module'
  },
  // 使用的插件，插件名称省略了eslint-plugin-
  plugins: ['vue'],
  // 启用的规则及其各自的错误级别(在这里配置规则)
  rules: {
    // 每一项都是一个eslint规则，off-0,warn-1,error-2等为当前规则值
    'no-console': 'warn',
    'no-debugger': 'error',
    'no-redeclare': 0,
    'no-useless-escape': 0,
    'no-mixed-spaces-and-tabs': 0,
    'valid-v-for': 0
  }
};

这个配置文件使用了eslint-plugin-vue插件，需要安装一下：
npm install --save-dev eslint-plugin-vue
此时，项目已经可以按照我们约定的方式对开发者进行约束了,代码不规范会提醒,文件保存后自动按照规范进行调整。

旧项目引入

如果手头的项目已经开发了一段时间或者临时改变了一些校验规则，总不能挨个文件打开然后保存吧，此时配置完成后一定会一片飘红。
在package.json中配置如下：

"scripts": {
    "serve": "vue-cli-service serve",
    ...
    "format": "prettier --write "src/**/*.{js,json,jsx,vue,html}""
  },

此时执行npm run format就可以将全部的文件都格式化掉了，不过我只是针对新建的项目做了测试，文件不多，实际如果很大的项目，不建议这样直接全部替换，可能会出现意想不到的问题。

说到最后

以上。