ESlint+Prettier的使用

草台班班长_Ndie

已于 2022-08-11 11:17:45 修改

阅读量1k

点赞数

文章标签： typescript vue.js vscode

于 2022-05-12 11:46:33 首次发布

本文链接：https://blog.csdn.net/m0_46978096/article/details/124726880

版权

本文介绍了如何在VSCode中安装并配置ESLint和Prettier，包括安装步骤、冲突解决方案，以及如何设置自动格式化规则。重点讲解了如何创建.eslintrc.js和.prettierignore文件，并配置了基本的eslint规则和prettier选项。

摘要由CSDN通过智能技术生成

eslint安装

npm install eslint --save-dev

然后

npx eslint --init

一步步的走下去eslint就安装成功了，项目里面也多了个**.eslintrc.js**文件，也多了一些跟eslint有关的插件

prettier安装

npm install --save-dev --save-exact prettier

然后

npx prettier --write .

然后在项目根目录建个**.prettierrc.js**文件
在这里插入图片描述
可以下这个插件解决eslint和prettier的一些冲突

npm i eslint-config-prettier

我用的是VScode，在settings.json里添加下面代码，这样你保存的时候就会根据eslint的规则来格式化
左下角设置----》命令面板------》输入命令settings.json

"editor.formatOnSave": true,//编辑器保存采用pretter自动格式化代码
 // 每次保存的时候将代码按eslint格式进行修复
 "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
 }

简单的eslint配置

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
    'vue/setup-compiler-macros': true //  取消defineProps这种类型的报错
  },
  // plugin:vue/vue3-essential用vue3的规则
  extends: ['plugin:vue/vue3-essential', 'standard'],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    'vue/multi-word-component-names': 'off', // 关闭文件命名检测，一个单词的文件名会报错，驼峰式的可以
    'no-unused-vars': 'off',
    'vue/html-self-closing': [
      'error',
      {
        html: {
          void: 'always',
          normal: 'never',
          component: 'always'
        },
        svg: 'always',
        math: 'always'
      }
    ],
    semi: 0, //  结尾加分号
    eqeqeq: 'off' // 不检验判断是==还是===
  }
};