Vue集成Prettier、ESLint和Airbnb规范

Vedu • 2021-02-03 15:35 • 技术资讯 • 阅读 1764

讲讲怎么在Vue项目中集成Prettier和ESLint，自动完成代码语法检查和格式化，让我们能够摆脱代码格式困扰，从而更多的关注功能和逻辑，让编码更高效，更优雅。

安装VS Code插件

Vetur：专为vscode开发的工具集，能够为vue提供语法高亮，代码检查，智能提示等；

Prettier：主要是面向前端的代码格式化工具，支持Typescript、Javascript、Html、CSS等；

ESLint：用来发现和修复Javascript的语法或者格式错误，提供了多种规范可选，目前也支持Typescript；

Vetur插件截图

Prettier插件截图

ESLint插件截图

安装Prettier和ESLint相关的库

npm i -D eslint eslint-config-prettier eslint-plugin-prettier prettier

eslint:用来识别和报告ECMAScript/JavaScript语法错误的工具；

eslint-config-prettier:用于关闭ESLint非必要的或者跟Prettier有冲突的规则；

eslint-plugin-prettier:使Prettier成为ESLint的规则，并且报告跟ESLint的规则冲突；prettier:一个格式化工具，支持Js、Html、CSS等前端语言格式化；

安装Airbnb配置

npx install-peerdeps --dev eslint-config-airbnb

配置ESLint

在项目根目录创建.eslintrc.js配置文件，并配置如下：

module.exports = {
  parser: \'babel-eslint\',
  extends: [\'airbnb\', \'prettier\'],
  plugins: [\'prettier\'],
  rules: {
    \'prettier/prettier\': \'error\',
  },
  // js配置文件写注释不会报错哦
};

注意这里使用了js格式的配置文件，相比json格式的配置文件有两个好处：1.能够在里面使用注释；2.能够被自动格式化。下面的prettier配置文件也使用了js格式，出于同样的原因。

配置Prettier

在项目根目录创建.prettierrc.js配置文件，并配置如下：

module.exports = {
  semi: true,
  singleQuote: true,
  tabWidth: 2,
  useTabs: false,
};

开启VSCode保存时格式化

开启保存时自动格式化，避免手动执行的多余操作，提高效率。在项目根目录创建.vscode目录，在其中创建settings.json文件，目的是只针对当前项目配置生效。settings.json内容如下：

{
    "editor.formatOnSave": true,
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
     "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
     "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
     "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
}

demo最终截图

demo文件目录结构

以上配置经过测试！

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/tech/20938.html