Vue集成Prettier、ESLint和Airbnb规范

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

安装VS Code插件

  • Vetur:专为vscode开发的工具集,能够为vue提供语法高亮,代码检查,智能提示等;
  • Prettier:主要是面向前端的代码格式化工具,支持Typescript、Javascript、Html、CSS等;
  • ESLint:用来发现和修复Javascript的语法或者格式错误,提供了多种规范可选,目前也支持Typescript;
Vue集成Prettier、ESLint和Airbnb规范

Vetur插件截图

Vue集成Prettier、ESLint和Airbnb规范

Prettier插件截图

Vue集成Prettier、ESLint和Airbnb规范

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最终截图

Vue集成Prettier、ESLint和Airbnb规范

demo文件目录结构

以上配置经过测试!

内容出处:,

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

发表评论

登录后才能评论