Remember a Vue project to start the eslint process

Get into the habit of writing together! This is the second day of my participation in the "Nuggets Daily New Plan · April Update Challenge", click to view the details of the event .

problem to be solved

I took over a background management system project, which was developed based on Ruoyi's background management system. I have always closed eslint before, or ignored the js and vue files in the .eslintignore file, so there has been no warning from eslint.

At present, it is estimated that code optimization is to be done, so eslint should be enabled; but if this open source project should have eslint configuration, if the configuration of .eslintignore is removed, the alarm should take effect.

But after some operations, the eslint warning prompt on the command line already exists, but the browser has no eslint warning prompt, so I have been struggling for two days.

Answer

The reason is a meta tag in index.html

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
复制代码

Description of this meta tag: Content Security Policy Getting Started Tutorial - Ruanyifeng's Web Log (ruanyifeng.com)

It can be seen that the warning of eslint is added to the page by webpack with iframe, so the above meta tag will not be able to embed the iframe

The process of entering science

Distorted road one

The first thought is vue.config.jswhether there is less configuration of eslint-related things

The lintOnSave configuration is available, and the judged dev environment is enabled

The configuration of devServer is added later

devServer: {
  overlay: {
    warnings: true,
    errors: true
  },
},
复制代码

The content of the comment .eslintignore, coupled with the above configuration, the eslint warning on the command line is out

Distorted road two

Continue to wonder why the browser does not have a warning prompt from eslint

Begin to suspect that .eslintrc.jsthere is a configuration problem

Read the configuration tutorial on the eslint official website: Getting Started with ESLint - ESLint Chinese documentation (bootcss.com)

./node_modules/.bin/eslint --initYou can reconfigure eslint on the command line

After some operations, .eslintrc.jsthe configuration is also updated, and the required npm modules are downloaded.

After restarting the project, there is still no browser eslint prompt

crooked road three

Delete node_modules and reinstall it; use nvm to switch node version, after all tried, still useless

Thinking of creating a new demo project to compare the difference

In contrast, the versions of some npm modules are different. Try to migrate the files in the project to the demo to run, and find that after the files in the src directory are migrated in, there are still eslint warnings in the browser.

Therefore, after the final migration publicof the folder, it was found that the alarm was gone, and it was not displayed in the browser.

Thinking about whether it might be affected by some css, commented all the styles, no

Continue to comment script tags and js code, no

publicThe folder only leaves the index.html file, still not working

Replace the original index.html, and the prompt of eslint is back

Thus, comparing the two index.html files, it is found that there are many different meta tags

The final location is<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

final configuration

<% if(process.env.NODE_ENV !== 'development'){ %>
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<% } %>
复制代码

Question: <% %>what is this syntax called?

(8 private messages / 56 messages) The usage of <%%> and <%=%> in html? - Zhihu (zhihu.com)

off topic

In the project entry vue inspect > output.js, you can view the webpack configuration of the current project

(23 messages) vue-cli3 view webpack default configuration - Programmer Sought