vue项目中配置eslint和prettier-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue项目中配置eslint和prettier。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

本文介绍eslint作用，基本配置，日常使用技巧

一、需要哪一个

eslint检查语法错误，格式问题并不重要

prettier是格式化工具，保证代码美观

vscode插件Eslint（务必安装），错误标红，保存的时候自动修正eslint错误

二、安装和配置

如果项目中一开始就没有配置，用下面的方法从零配置

若项目中已经有别人配好的，可根据需要修改规则

1、eslint

eslint插件，初始化，生成.eslintrc.js或者.eslintrc.json文件

在vue项目中使用，需要安装多一个插件eslint-plugin-vue

npm i -D eslint eslint-plugin-vue
//在终端执行如下命令
./node_modules/.bin/eslint --init
//按照提示初始化
//在src同级目录下会生成.eslintrc.js或者.eslintrc.json
--> 进行规则配置，写入rules

2、prettier

2.1 安装包

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

2.2 修改package.json

加一句代码

"script": {
"format": "prettier --write src/"
}

2.3 eslint修改

修改eslint文件，extends选项中加入"plugin: prettier/recommended"//用prettier必须写

"plugins"选项中加入prettier

2.4 配置prettier规则

按照如下三配置prettier规则

三、配置解析

1、package.json

package.json 里创建一个 eslintConfig属性，写规则(某些配置简单的项目会这么做)

eslintConfig: {
"rules": []
}

2、.eslintrc.json

在src同级目录下新建.eslintrc.json文件，也可能是.eslintrc.js

2.1 JS的写法

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint: recommended"//这一句必须写
    "plugin:react/recommended", "standard"//根据用哪个框架，也需要安装vue/essential
    "plugin: prettier/recommended"//用prettier必须写
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint", "prettier", "vue"],//没有插件可以空着
  "rules": {}
}

常用的rules

rules: 
    {
      no-undef: 0,//使用未声名的变量
      no-unused-vars: 0//声名未使用
      quotes: [error, single]
      'vue/multi-word-component-names': 'off'//关闭eslint检查文件名是否为驼峰命名
    }

2.2 ts的写法

3、prettier配置

在src同级目录下新建.prettierrc.json，也可能是.prettierrc.js

module.exports = {
  tabWidth: 2,//两个空格
  jsxSingQute: true,
  printWidth: 100,//一行输入多少个字符
  singQute: true,
  semi: false,
  endOfLine: "crlf",
  overrides: [
    {
      files: '*.json',
      options: {
      	printWidth: 200
      }
    }
  ],
  allowParens: 'always'
}