eslint

环境： VSCode 1.33.1 Node.js 8.9.1 一、ESLint 1、介绍 ESLint 是最流行的 JavaScript Linter 。 Linter 是检查代码风格/错误的小工具。其他类似的 Linter 工具还有：TSLint、stylelint。 它包含三个功能： （1）check syntax （2）find problems 前两个可以统称为 Code-quality rules，例如 no-unused-vars 规则。 （3）enforce code style 最后一个可以称为 Formatting rules ，例如 keyword-spacing 规则。 下面介绍的 Prettier 就只有这一个 Formatting rules 功能。 2、安装 npm install -g eslint 建议全局安装。 3、使用 (1) 生成配置文件 下面的命令，可以在项目的根目录创建 .eslintrc.js 配置文件。 eslint --init 按照交互提示，依次选择进行： (2) 校验文件 eslint yourfile.js # 命令行会返回出现 problems 的数量和相应行数。 eslint --fix yourfile.js # 直接修改文件 (3) 修改配置文件 一个简单的 .eslintrc.js 文件： module

visual studio code格式化之前，符合eslint < template > < div > 动态列表 </ div > </ template > < script type = "text/javascript" > export default { name: 'DynamicList' , components: {}, data () { return { name: false } }, created () {}, mounted () {}, methods: {} } </ script > < style lang = "less" scoped > </ style > visual studio code格式化后，不符合eslint，当cnpm run dev,会被eslint检查出一些语法错误，因此两者冲突了。 < template > < div > 动态列表 </ div > </ template > < script type = "text/javascript" > export default { name: "DynamicList" , components: {}, data () { return { name: false }; }, created () {}, mounted () {}, methods: {}

ESLint  不管是多人合作还是个人项目，代码规范都是很重要的。这样做不仅可以很大程度地避免基本语法错误，也保证了代码的可读性。 准备工作 一、VSCode ESLint插件 ESLint插件用于根据工程目录的.eslintrc.js配置文件在编辑器中显示一些错误提示。 二、基于vue-cli创建项目 具体步骤如下： 创建项目 创建的时候把Linter/Formatter选上(默认已选上) 下一步选择ESLint with error prevention only 下一步选择Lint on save (在编辑保存之后根据对代码格式进行检测) 下一步选择In dedicated config files(将eslint的配置抽离到独立的文件中) 剩下的步骤默认下一步，即可完成项目的创建 配置项 所有的配置文件都在 .eslintrc.js 中，默认情况下使用了plugin:vue/essential来校验代码，当然，你也可以选择最严格的plugin:vue/recommended来校验代码。 module . exports = { extends : [ 'plugin:vue/recommended' , 'eslint:recommended' ] //你可以修改为 extends: ['plugin:vue/essential', 'eslint:recommended'

1.全局安装脚手架 npm install -g @vue/cli 安装成功如图： 2.全局安装vue/cli-service-global 插件 npm install -g @vue/cli-service-global 安装成功如图： 3.创建vue项目 vue create vue3.0(项目名称，我直接使用的vue3.0) 随后会出现创建的两种方式 项目创建成功后，yarn serve 或者npm serve即可运行项目 第一种方式：默认创建，即默认生成目录，但是是有严格模式的，即eslint是生效的，想要去掉 则在 则在以上目录中，找到.eslintrc.js文件， 删除或者注释掉extends下面的@vue/standard，随后重新启动项目即可 使用手动创建项目：则需要手动做一些选择，但有时严格模式也会被留下，因此也可在相同的目录中注释掉或者删除掉@vue/prettier，即可去掉严格模式， 4.下载项目模板，怎样去除严格模式呢 全局搜索：extends， 一般在package.json或者vue.config.js 同上图一样，删除掉@vue/standard，重新启动项目就可以了。在package.json文件中，编译不允许有注释，所以还是直接删掉 来源： oschina 链接： https://my.oschina.net/u/4383199/blog

安装vue-cli npm install -g @vue/cli # OR yarn global add @vue/cli 安装完成查看版本 查看版本 vue -V 如果报错： vue : 无法加载文件 C:\Users\xxx\AppData\Roaming\npm\vue ... 　　1.管理员身份打开 　　 　　2.输入 set-ExecutionPolicy RemoteSigned 　　 4.选择Y 或者A ，就好了 vue-cli4.0对比了一下3.0的脚手架，除了目录发生变化一些，其他的都一样 安装步骤和vue-cli3.0的一模一样 1.创建项目 vue create project-name 　　default 是 使用默认配置 　　 Manually select features 是 自定义配置 2.选择配置（自定义配置） 3.选择css预编译，这里我选择SCSS 4. 语法检测工具，这里我选择ESLint + Prettier 5.选择语法检查方式，这里我选择保存就检测【何时进行ESLint语法校验：Lint on save】 6.接下来会问你把babel,postcss,eslint这些配置文件放哪【 In dedicated config files (单独使用文件进行配置)】 7.是否保存为模板 N 不记录，如果键入 Y 需要输入保存模板名字 8

10月16日，官方发布消息称Vue-cli 4.0正式版发布,并且强烈建议升级;小编也是刚刚安装了最新版本的脚手架看看更新了什么 安装和vue-cli3.0的是一模一样的，对比了一下3.0的脚手架，除了目录发生变化一些，其他的都一样 安装步骤和vue-cli3.0的一模一样 1.创建项目 vue create project-name default 是 使用默认配置 Manually select features 是 自定义配置 2.选择配置（自定义配置） 3.选择css预编译，这里我选择SCSS 4. 语法检测工具，这里我选择ESLint + Prettier 5.选择语法检查方式，这里我选择保存就检测 6.接下来会问你把babel,postcss,eslint这些配置文件放哪，这里随便选， 7.键入N不记录，如果键入Y需要输入保存名字 8.项目创建好后 cd project-name // 进入项目根目录 npm run serve // 运行项目 9.然后在浏览器输入http://localhost:8080,就可以看到运行的界面了 来源： oschina 链接： https://my.oschina.net/u/4355290/blog/3291956

VS Code写Vue，每次按照eslint格式手动fix代码很烦，Alt+Shift+f格式化代码又会和prettier冲突，因此找了Ctrl+s保存代码，自动按照eslint风格格式化代码。 网上大多是早前修改方法，现在已经不适用，因此写这个随笔，避坑。 当前版本使用方式， 使用编辑器提供的 Code Actions On Save ，也就是说VS Code提供了用户保存文档时添加自定义操作的接口。位置如下： 然后，将json中 editor.codeActionsOnSave 的值改为 { "source.fixAll.eslint": true } 即可。如下： 搞定！ 注意，以下这种方式已经 弃用 ： 来源： oschina 链接： https://my.oschina.net/u/4381446/blog/4260685

我们一起来喜欢TypeScript 现在写js不用TypeScript，伦家可能会觉得你是外星人。 是的，TypeScript很大程度增强了代码的可读性，可跟踪性，可维护性和减少了bug。 那么没有理由不适用TypeScript进行js开发，但是回归本质，要根据实际出发，不是盲目的一来直接上TS。 我参与过一些使用TS开发的项目，也发现使用TS出现的问题。 举点例子： 无处不见的any 无视TS 高版本的express已经内置TS, 实际上到处还是any。 app.get("/", function(req: any, res: any) { res.send("Hello," + data.name); }); 本身一个函数能写完的代码，却写一个class来完成 tslint编译一堆错误，依旧无视 这条倒是其次， 因为很多时候，也许你没有那么多时间去处理这些问题。也说明我们在工程化下的功夫不足。 node和typescript node + typescript 入门级别的配置真的特别简单。 npm安装typescript 配置tsconfig.json 配置package.json的scripts命令 简单三步，你就可以通过简单的一步npm run xxx，TS文件们就乖乖的变为了js文件。 然后执行node dist/xx.js就能启动你的服务了。 但是，这不是我们所期望的。