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

一、需要哪一個(gè)

eslint檢查語法錯(cuò)誤，格式問題并不重要

prettier是格式化工具，保證代碼美觀

vscode插件Eslint（務(wù)必安裝），錯(cuò)誤標(biāo)紅，保存的時(shí)候自動(dòng)修正eslint錯(cuò)誤

二、安裝和配置

如果項(xiàng)目中一開始就沒有配置，用下面的方法從零配置

若項(xiàng)目中已經(jīng)有別人配好的，可根據(jù)需要修改規(guī)則

1、eslint

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

在vue項(xiàng)目中使用，需要安裝多一個(gè)插件eslint-plugin-vue

npm i -D eslint eslint-plugin-vue
//在終端執(zhí)行如下命令
./node_modules/.bin/eslint --init
//按照提示初始化
//在src同級(jí)目錄下會(huì)生成.eslintrc.js或者.eslintrc.json
--> 進(jìn)行規(guī)則配置，寫入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選項(xiàng)中加入"plugin: prettier/recommended"http://用prettier必須寫

"plugins"選項(xiàng)中加入prettier

2.4 配置prettier規(guī)則

按照如下三配置prettier規(guī)則

三、配置解析

1、package.json

package.json 里創(chuàng)建一個(gè) eslintConfig屬性，寫規(guī)則(某些配置簡單的項(xiàng)目會(huì)這么做)

eslintConfig: {
? "rules": []
}

2、.eslintrc.json

在src同級(jí)目錄下新建.eslintrc.json文件，也可能是.eslintrc.js

2.1 JS的寫法

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint: recommended"http://這一句必須寫
    "plugin:react/recommended", "standard"http://根據(jù)用哪個(gè)框架，也需要安裝vue/essential
    "plugin: prettier/recommended"http://用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'//關(guān)閉eslint檢查文件名是否為駝峰命名
    }

2.2 ts的寫法

3、prettier配置

在src同級(jí)目錄下新建.prettierrc.json，也可能是.prettierrc.js

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

四、eslint忽略

1、直接關(guān)閉

關(guān)閉所有文件的檢查（一般不會(huì)用）

//vue.config.js?
module.exports = { ? ??
?? ??? ?lintOnSave: false//eslint-loader 是否在保存的時(shí)候檢查?
}

2、忽略某一個(gè)文件

將/* eslint-disable */放置于文件最頂部

/* eslint-disable */?
my code

3、忽略某一段（行）

以分號(hào)結(jié)尾會(huì)報(bào)錯(cuò)，如果特殊必須用分靠結(jié)尾的，就忽略該段代碼

/* eslint-disable */?
<el-button?
? @click="handleClick(); //增長以分號(hào)結(jié)尾會(huì)報(bào)錯(cuò)
? handlePush();
? >?
/* eslint-enable */

//在js中應(yīng)用，忽略某一行
my code // eslint-disable-line

關(guān)閉下一行的校驗(yàn)
// eslint-disable-next-line?
my code

4、對某一種規(guī)則啟用或者禁用

不允許輸入輸出，變成允許

/* eslint-disable no-alert, no-console */?
my code
/* eslint-enable no-alert, no-console */文章來源地址http://www.zghlxwxcb.cn/news/detail-732654.html

到了這里，關(guān)于vue項(xiàng)目中配置eslint和prettier的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！