VUE CLI3项目搭建 ESLint配置

html-css011

VUE CLI3项目搭建 ESLint配置,第1张

1.查看代理:npm get registry

2.设置淘宝镜像

2.1临时使用.

npm --registry https://registry.npm.taobao.org install express

2.2持久使用.

npm config set registry https://registry.npm.taobao.org

2.3验证是否成功

npm config get registry 或 npm info express

2.4.还原:

npm config set registry https://registry.npmjs.org/

1.npm install -g n

2.n stable (最新稳定版本)或者 n latest (最新版本)

1.安装新包:npm install -g @vue/cli

2.查看版本:vue --version 或者 vue -V

3.vue create projectName

4.Check the features needed for your project:

5.Use history mode for router

6.Pick a CSS pre-processor

7.Pick a linter / formatter config

8.Pick additional lint features

9.Pick a unit testing solutio

10.Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?

11.Save this as a preset for future projects

1.安装:npm install vue-i18n 或者 vue add i18n (Vue CLI 3)

2.选择默认环境:The locale of project localization. (en) 输入:zh

3.切换的环境The fallback locale of project localization 输入:en

4.打开项目,在src下新建lang目录

5.选择在src下的一个目录作为存放:The directory where store localization messages of project. It's stored under

src directory. (locales)

输入:lang

6.单引号设置:Enable locale messages in Single file components ? (y/N) 输入:y

7.查看目录lang,生成了zh.json en.json

1.命令安装:npm i --save-dev postcss

2.命令安装:npm isntall postcss-import

3.命令安装:npm i postcss-px-to-viewport

4.命令安装:npm i postcss-aspect-ratio-mini

5.命令安装:npm i postcss-cssnext

6.命令安装:npm i postcss-write-svg

7.命令安装:npm i postcss-viewport-units

8.命令安装:npm i cssnano-preset-advanced --save-dev

9.命令安装:npm install

10.打开项根目录下找到postcss.conf.js

改为:

11.npm run serve

项目打开成功如下图,样式单位由PX换位VM即为成功

使用方式:找到报错文件,右键Fix ESlint Problems即可,

注意:网上有两种方式:一种右键.eslintrc.js文件执行Fix ESlint 或者 Apply ESlint或者eslint --fix后再运行,报错会消失,但是错误并不会改正。

prettier3.7以上会优先读取项目根目录下的editorconfig or prettier config,如果有,就不会使用vscode setting中的设置,所以最好每个项目都配置一个单独的 prettier 配置文件。名字为: .prettierrc

根据需求自行修改,并保存。注释需去掉,不兼容 //

shift + alt + f,格式化的文件符合eslint要求

如果还有问题,配合 https://eslint.bootcss.com/ 来修改.eslintrc.js里的配置(注意要重跑项目才起效)

从我用过的方法,可以从两个层面来说,不过都是没有办法100%的精准和全面的。也可能还有一些更好的方法,不过我没用过。

代码检测

对于JS,可以使用JSHint或者ESLint进行进行代码检测,可以检测到每个代码里面你定义(或者引入)但是并没有用到的变量。你可以在你的编辑器里面安装相关插件,也可以通过在每次代码提交之前进行检测。相关使用方法可以看这里:ESLint,JSHint比如:我使用VI作为编辑器,截图中使用的是ESLint:

.

.

使用Chrome的 Dev Tool

Chrome从某个版本开始加入了Coverage,打开方式:

.

.

下图中,绿色的是页面使用到的CSS和JS代码,红色是未被使用的(注意,这里未被执行过,不代表没有用,只是代表还没被触发):

.