11_webpack_ESLint

认识ESLint

ESLint是一个静态代码分析工具(在没有任何程序执行的情况下，对代码进行分析)

ESLint可以帮助我们在项目中建立统一的团队代码规范，保持正确、统一的代码风格，提高代码的可读性、可维护性

 

使用ESLint

安装：npm i eslint -D

npx eslint --init

它会在控制台让你进行很多的选项具体的选项在另外一篇博客中

eslint选项和配置 - Mr-Hou88888 - 博客园 (cnblogs.com)

 

校验代码是否符合规范

npx eslint 所需要校验的文件目录以./开头

 

对某些规范做覆盖

 

 

 这种错误一般都是继承了像airbnb的规范

 

 

 像这种错误可以在.eslintrc.js文件的rules中去配置一些规则去覆盖继承的规则，具体的配置可以去官网查看List of available rules - ESLint - Pluggable JavaScript linter

下面是简单的示范

  rules: {
    'linebreak-style': [0, 'error', 'windows'],
    'no-unused-vars': 'off',
    'comma-dangle': 'off',
    'import/no-extraneous-dependencies': 'off',
    'import/newline-after-import': 'off',
    quotes: 0,
    'no-console': 0,
    semi: 0
  },

也可以手动的去修改代码，让其变的规范

也可以执行 npx eslint --fix 具体文件路径以./开头

 

eslint-loader(已弃用)

如果说你现在使用的是webpack5新版本的话，使用eslint-loader会报错的，我们现在一般都是使用eslint-webpack-plugin这个插件，具体详细信息：12_webpack_eslint-webpack-plugin - Mr-Hou88888 - 博客园 (cnblogs.com)

像我们自己手动的去执行这些命令肯定是很麻烦

所以我们可以去安装一个loader

npm i eslint-loader -D

在加载js文件的时候使用这个loader，进行校验，如果不规范会直接报错的

配置

rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: [
          'babel-loader',
          'eslint-loader'
        ]
      },
    ]

 

 

eslint插件的使用

VSCode中去下载eslint中的插件使用

插件的原理：
　　会去当前目录下面，读取.eslintrc.js文件里面的规则，根据你的规则，检查你当前的文件是否符合规范

 

Prettier插件

VSCode中的插件，用于格式化作用

我们一般会在项目中创建一个.prettierrc文件

然后我们设置默认的格式化插件

右键