vscode中eslint插件不生效的解決過程
vscode中eslint插件不生效
case:
最近使用webpack打包js資源中使用到了VS Code中的eslint插件輔助eslint plugin對代碼進行校驗,在.eslintrc.js文件中以及webpack.config.js配置好后,
在控制臺運行npx webpack可以讀取到eslint plugin的檢測結果
一、eslint插件讀取項目中.eslintrc.js配置文件
1、 eslint插件卻始終不生效,在代碼里沒有eslint插件該有的紅色波浪線

查閱eslint插件官網(wǎng),找到如下描述:
eslint.enable: enable/disable ESLint for the workspace folder. Is enabled by default.
如圖,查找配置項找到configFile,若有,則看配置讀取文件是否正確,若不正確,直接刪掉吧,
configFile如果不設置,ESLint 會在當前工作目錄及其父目錄中查找默認的配置文件

所以在vscode配置文件中設置eslint.enable: true,或者直接在配置setting.json文件中刪除此配置,(因為有提示.enable配置將被棄用)
二、eslint插件讀取.eslintignore文件失效(eslintignore文件不生效)
繼續(xù)查閱文檔
eslint.workingDirectories - specifies how the working directories ESLint is using are computed. ESLint resolves configuration files (e.g. eslintrc, .eslintignore) relative to a working directory so it is important to configure this correctly. If executing ESLint in the terminal requires you to change the working directory in the terminal into a sub folder then it is usually necessary to tweak this setting. (see also ESLint class options#cwd). Please also keep in mind that the .eslintrc* file is resolved considering the parent directories whereas the .eslintignore file is only honored in the current working directory. The following values can be used:
[{ "mode": "location" }] (@since 2.0.0): instructs ESLint to uses the workspace folder location or the file location (if no workspace folder is open) as the working directory. This is the default and is the same strategy as used in older versions of the ESLint extension (1.9.x versions).
[{ "mode": "auto" }] (@since 2.0.0): instructs ESLint to infer a working directory based on the location of package.json, .eslintignore and .eslintrc* files. This might work in many cases but can lead to unexpected results as well.
string[]: an array of working directories to use. Consider the following directory layout:
root/
client/
.eslintrc.json
client.js
server/
.eslintignore
.eslintrc.json
server.js
Then using the setting:
"eslint.workingDirectories": [ "./client", "./server" ]
will validate files inside the server directory with the server directory as the current eslint working directory. Same for files in the client directory. The ESLint extension will also change the process's working directory to the provided directories. If this is not wanted a literal with the !cwd property can be used (e.g. { "directory": "./client", "!cwd": true }). This will use the client directory as the ESLint working directory but will not change the process`s working directory.
[{ "pattern": glob pattern }] (@since 2.0.0): Allows to specify a pattern to detect the working directory. This is basically a short cut for listing every directory. If you have a mono repository with all your projects being below a packages folder you can use { "pattern": "./packages/*/" } to make all these folders working directories.
翻譯一下:
eslint.workingDirectories 此配置其實就是設置eslint工作目錄,所以我們在setting.json文件中配置工目錄
[{ "mode": "location" }] 默認的
[{ "mode": "auto" }] 指示ESLint根據(jù)包的位置推斷工作目錄。.eslintignore和.eslintrc*文件。這可能在許多情況下有效,但也可能導致意想不到的結果
[{ "pattern": glob pattern }]允許指定檢測工作目錄的模式。這基本上是列出每個目錄的捷徑。如果你有一個單一的存儲庫,所有的項目都在一個包文件夾下,你可以使用{"pattern": "./packages/*/"}將所有這些文件夾設置為工作目錄。
很顯然。
默認的配置噶了,所以剩下下面兩個推斷與指定了

總結
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Eclipse 格式化代碼時不換行與自動換行的實現(xiàn)方法
每次用Eclipse自帶的Ctrl+shift+f格式化代碼時,如果原來的一行代碼大于80列,Eclipse就會自動換為多行,這點個人感覺不是很舒服,簡單試了一下,通過以下方式可以修改2009-05-05
VSCode設置網(wǎng)頁代碼實時預覽的實現(xiàn)
這篇文章主要介紹了VSCode設置網(wǎng)頁代碼實時預覽的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
IDEA/WebStorm/Pycharm鼠標滾輪ctrl+滾輪-調(diào)節(jié)縮放字體大小
很多朋友不清楚IDEA/WebStorm/Pycharm鼠標滾輪ctrl+滾輪-調(diào)節(jié)縮放字體大小的,下面我以idea開發(fā)工具為例給大家通過截圖一步步展示操作方法,需要的朋友可以參考下2021-05-05

