phpstorm eslint使用

最新推荐文章于 2024-06-12 09:48:35 发布

小白日常

最新推荐文章于 2024-06-12 09:48:35 发布

阅读量386

点赞数

文章标签： phpstorm vue.js javascript

本文链接：https://blog.csdn.net/weixin_44365748/article/details/131231764

版权

文章讲述了作者研究eslint的使用过程，遇到的版本兼容问题以及如何解决编辑器报错。通过npm安装特定版本的eslint及相关插件，然后初始化配置，关闭某些不适应的规则，如import/extensions和import/no-unresolved。作者还提到在找寻相关文档的困难，最终成功配置并推荐了eslint-plugin-vue的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

研究了半天eslint 怎么用，现记录结果

//安装eslint，这里有个坑，最新eslint安装后用不了，编辑器报错
npm intall eslint@8.22.0 eslint-plugin-vue@latest eslint-config-airbnb-base@latest eslint-plugin-import@^2.25.2
//初始化
eslint --init //一堆选项，按情况下一步即可
//初始化最后一步提示
The config that you've selected requires the following dependencies:
eslint-plugin-vue@latest eslint-config-airbnb-base@latest eslint@^7.32.0 || ^8.2.0 eslint-plugin-import@^2.25.2
√ Would you like to install them now? · No / Yes
//别选yes，选yes后因eslint@^7.32.0 || ^8.2.0，会自动安装最新eslint
//安装后phpstorm会提示各种错误，挨个关掉检测规则
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'airbnb-base',
    'plugin:vue/recommended',//https://eslint.vuejs.org/user-guide/ 在这里有配置信息，可以到这查看，我选的这个级别感觉很好，会强制很多东西
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: [
    'vue',
  ],
  rules: {
    'import/extensions': 'off',//关掉import a from '@/test/a因没有扩展名而报的错
    'import/no-unresolved': 'off',//关掉import a from '@/test/a 无法解析报的错
     quotes: "off",//关掉因字符串使用双引号报的错，因项目中已经太多地方用的双引号了
  },
};

配置不难，难的是找文档，这顿找，奶奶的。去eslint官网文档的规则列表中根本找不到关于扩展名相关的配置，后来突发奇想，把phpstorm的提示规则写在规则那才成。
在一个npm资源网https://www.npmjs.com/查到eslint-plugin-vue 跳转插件官网，才找到eslint-plugin-vue怎么用。。。